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

Posted 2023-02-24

【中文标题】从 Javascript 接收数据后重定向到新页面

【英文标题】：Redirect to new page after receiving data from Javascript

【发布时间】：2016-11-18 21:45:35

【问题描述】：

我正在尝试将 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>

【问题讨论】：

你可以使用渲染。先从 django.shortcuts 导入重定向，然后渲染即可return render(request, 'cart.html.html', context)。

How can I make a page redirect using jQuery?的可能重复

我尝试使用window.location.href，但我需要从 django 重定向页面，因为我想将模型对象传递给页面。另外，使用render 给了我同样的结果。

为什么是window.location.href？如果您像这样重定向，您将丢失数据。您也可以将#getArr 制作成一个表格，然后将post 制作成cart/。

【参考方案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))

【讨论】：

我的 HTML 文件中有一个 POST 表单（表单的 id 是 getArr），但是如何在没有 jquery 的情况下将 javascript 数组传递给 HTML？

如果表单中有多个输入元素，它们都具有相同的名称（在您的情况下为ab[]），那么在发布该表单时，Django 会将它们识别为数组。我不确定变量 chosen 是如何在您的代码中定义的。但是，如果您只是在选择类似于 <input type="hidden" name="ab[]" value="product_id" /> 的产品时向 getArr 表单添加隐藏字段，那么您视图中的 request.POST.getlist('ab[]') 调用应该可以工作。

我添加了一个适用于我的答案的表单示例

如果您将 getArr 元素的 html 添加到您的帖子中可能会有所帮助，这样我可以更好地了解情况。

我用 html 代码更新了帖子。 chosen 也只是 js 中的一个数组。