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

我正在尝试将 Javascript 数组传递到我的 Django 视图。这可行，但我想操纵该数据并将其显示在单独的网址中。所以我有一个产品页面，您可以在其中选择商品。提交表单后，将调用此 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 做到这一点

索引.html

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

如果我正确理解这个问题，我认为您完全使用 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() 函数函数并将该表单提交到您的 Django 元素。在 Django 中通常渲染模板（或作为片段以避免重复其他页面元素）。

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- 创建一个带有元素名称的典型 HTML 表单ab[]并将该表单提交到您的 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') + '"/>')
})

姜戈视图：

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))