时间戳

首页 > 解决方案 > 使用 Ajax 一键将多个表单提交到 Django 视图

jquery - 使用 Ajax 一键将多个表单提交到 Django 视图

问题描述

我有一个基本页面，用户可以在其中使用标准表单执行操作。由于我需要在提交表单时不重新加载页面，而不是使用 Django Forms 来处理提交，因此我使用的是 Ajax。

当表单提交时，一个 Ajax 请求被触发到我的 Django 视图，此时它应该只打印出请求的内容，以便让我调试它。

一切正常，但现在我想为用户添加一个选项，以便同时购买更多商品，因为它是一个电子商务网站。所以我需要一种方法，用不同的数据和一个按钮多次提交相同的表单。

这是我用来发送请求的 ajax 函数：

$(document).ready(function () {

  $("#myform").submit(function (event) {
      callAJAX( "/myview/",
       {"X-CSRFToken": getCookie("csrftoken") },
       parameters={
      'item': $('#item').val(), 'amount': $('#amount').val()},

      'post',
       function(data){
        console.log('Request fired.')

       }, null, null );
  return false; 
  });
});

这将起作用：，以下表单将向我的 Django 视图发送一个标准请求，其中包含项目和用户选择的金额。

<form method='post' id='myform'>
  {% csrf_token %}
  <input type="text" placeholder="Item" id='item'>
  <input type="text" placeholder="Amount" id='amount'>
  <button name="button1" type="submit" class="btn btn-primary btn-sm f-14 mr-1">SUBMIT</button>
</form>

但是如果我想在同一个页面中提交两个表单呢？

我试过这个：

<form method='post' id='myform'>
  {% csrf_token %}
  <input type="text" placeholder="Item" id='item'>
  <input type="text" placeholder="Amount" id='amount'>
</form>

<form method='post' id='myform'>
  {% csrf_token %}
  <input type="text" placeholder="Item" id='item'>
  <input type="text" placeholder="Amount" id='amount'>
</form>
<button name="button1" type="submit" class="btn btn-primary btn-sm f-14 mr-1">SUBMIT</button>

这是行不通的，因为按钮与两个表单中的任何一个都不在同一字段中，但期望的输出是同时提交以下两个表单，发送两个不同的请求，每个表单一个。

所以，应该发生的是：假设输入是第一种形式和Amount one第二种形式，这些值应该作为两个不同的请求同时发送到我的 Django 视图，这样我就可以有这样的东西调试时：Item oneAmount twoItem two

REQUEST: 'Amount one', 'Item one'
REQUEST: 'Amount two', 'Item two'

甚至有可能做到吗？或者我应该只创建更多表单和更多 Ajax 函数，每个表单一个？任何建议表示赞赏

标签： jquerydjangoajaxforms

解决方案

只需将您的 jQuery 触发器从submit()表单click()上更改为按钮上。然后在您的click(). 

    $("#my_button").click(function (event) {
      event.preventDefault(); // prevent form from being submitted automatically
      callAJAX( "/myview/",
       {"X-CSRFToken": getCookie("csrftoken") },
       parameters={
       'item': $('#item1').val(), 'amount': $('#amount1').val()},

       'post',
       function(data){
        console.log('Request fired.')

       }, null, null );

      // Call ajax again with other items and amounts
      callAJAX( "/myview/",
       {"X-CSRFToken": getCookie("csrftoken") },
       parameters={
       'item': $('#item2').val(), 'amount': $('#amount2').val()},

       'post',
       function(data){
        console.log('Request fired.')

       }, null, null );
    });

    <form method='post' id='myform'>
      {% csrf_token %}
      <input type="text" placeholder="Item" id='item1'>
      <input type="text" placeholder="Amount" id='amount1'>
    </form>

    <form method='post' id='myform'>
      {% csrf_token %}
      <input type="text" placeholder="Item" id='item2'>
      <input type="text" placeholder="Amount" id='amount2'>
    </form>
    <button name="button1" id="my_button" type="submit" class="btn btn-primary btn-sm f-14 mr-1">SUBMIT</button>

请注意，我给了按钮一个 id 并更改了项目的 id 和金额以避免重复的 id。

推荐阅读