从 Javascript 接收数据后重定向到新页面

Question

我正在尝试将 Javascript 数组传递给我的 Django 视图。这可行，但我想操作该数据并将其显示在单独的 url 中。所以我有一个产品页面，您可以在其中选择项目。提交表单时，会调用此 javascript，我希望它重定向到购物车页面：

$("#getArr").submit(function(){
  var data = {'ab[]' : chosen};
  $.post('cart/', data, function(response){
    if(response == 'success'){ 
      window.location.href="cart/" // references my views
    }
    else{ 
      alert('Error! :('); 
    }
  });
});

views.py

def cart(request):
  if request.method == 'POST':
    chosen = request.POST.getlist('ab[]')
    print(chosen, file=sys.stderr)
    template = loader.get_template('o/cart.html')
    context = {'prodChosen': chosen,
                'e': "hy"}
    return HttpResponse('success')
    # return HttpResponse(template.render(context, request))
else:
    template = loader.get_template('o/cart.html')
    context = {}
    return HttpRepsonse('fail')
    # return HttpResponse(template.render(context, request))

就像注释掉的 HttpResponse 行一样，我需要将数据传递给我的 cart.html（它将是来自我的模型之一的对象）。我不知道如何将数据传递到我的购物车页面。

print(chosen, file=sys.stderr) 这一行非常有用。 以前，当我有使用注释掉的返回 HttpResponse 行的代码时，它会在我的终端上打印所需的数组和一个空数组。但是，使用此新代码，所需的数组会打印出来，但不会重定向到新页面。我不确定为什么会发生这种情况，但我确实知道在我之前的尝试中打印出的空数组也意味着我的购物车页面没有接收到正确的数组数据。

编辑：我需要将模型对象传递给新的 html 页面，这（据我所知）我无法通过 javascript 完成

index.html

<form id="getArr" method="POST">
      {% csrf_token %}
      <button type='submit' id="checkCart">Check Added Items</button>
</form>

Answer 1

如果我正确理解了这个问题，我认为您完全使用 JQuery 添加了一个额外的步骤。

解决方案#1 - 在 jQuery 中动态创建一个表单元素并将该表单提交到您的 Django 端点。在 Django 中正常渲染模板。

Javascript

$("#getArr").submit(function(){
  var url = 'cart/';
  var form = '<form action="' + url + '" method="post">';
  for (var i = 0; i < chosen.length; i++) {
      form += '<input type="hidden" name="ab[]" value="' + chosen[i] + '" />'
  };
  form += '</form>'
  var form_element = $(form);
  $('body').append(form_element);
  form_element.submit();
});

然后在你看来，像往常一样简单地返回模板：

views.py

def cart(request):
  if request.method == 'POST':
    chosen = request.POST.getlist('ab[]')
    print(chosen, file=sys.stderr)
    template = loader.get_template('o/cart.html')
    context = {'prodChosen': chosen,
                'e': "hy"}
    return HttpResponse(template.render(context, request))
else:
    template = loader.get_template('o/cart.html')
    context = {}
    return HttpRepsonse('fail')
    # return HttpResponse(template.render(context, request))

解决方案 #2 - 使用 jQuery .load() function 函数并将该表单提交给您的 Django 元素。在 Django 中正常渲染模板（或作为 sn-p 以避免重复其他页面元素）。

Javascript

$("#getArr").submit(function(){
  $('#main-content-div').load('cart/', $("#getArr").serialize());
});

views.py

def cart(request):
  if request.method == 'POST':
    chosen = request.POST.getlist('ab[]')
    print(chosen, file=sys.stderr)
    template = loader.get_template('o/cart.html')
    context = {'prodChosen': chosen,
                'e': "hy"}
    return HttpResponse(template.render(context, request))
else:
    template = loader.get_template('o/cart.html')
    context = {}
    return HttpRepsonse('fail')
    # return HttpResponse(template.render(context, request))

解决方案 #3 - 创建一个元素名称为 ab[] 的典型 HTML 表单，并将该表单提交到您的 Django 端点。在 Django 中正常渲染模板。

形式：

HTML

<form id="getArr" action="cart/" method="POST">
    <input type="text" name="ab[]" value="product_id_1"/>
    <input type="text" name="ab[]" value="product_id_2"/>
    <input type="text" name="ab[]" value="product_id_3"/>
    <input type="submit" value="Submit" />
</form>

一些用于向表单添加元素的 Javascript：

Javascript

$('.add_product').click(function(){
    $('#getArr').append('<input type="hidden" name="ab[]" value="' + $(this).attr('product_id') + '"/>')
})

Django 视图：

views.py

def cart(request):
  if request.method == 'POST':
    chosen = request.POST.getlist('ab[]')
    print(chosen, file=sys.stderr)
    template = loader.get_template('o/cart.html')
    context = {'prodChosen': chosen,
                'e': "hy"}
    return HttpResponse(template.render(context, request))
else:
    template = loader.get_template('o/cart.html')
    context = {}
    return HttpRepsonse('fail')
    # return HttpResponse(template.render(context, request))