Django - 如何使用 JQuery Ajax 插入多个表单数据答案

【问题标题】：Django - How to Insert Multiple Form Data using JQuery AjaxDjango - 如何使用 JQuery Ajax 插入多个表单数据
【发布时间】：2020-07-31 19:04:49
【问题描述】：

我想执行类似以下视频中描述的任务，

https://youtu.be/NoAdMtqtrTA?t=2156

在表中添加多行，然后将其全部插入到数据库中。

任何参考或任何示例代码都将非常重要。谢谢。

【问题讨论】：

标签： python jquery django ajax django-templates

【解决方案1】：

Javascript 代码为：

<script>
var data_dict = [];


// function called when Add row button is clicked
function Add_input_row()
  {

    var input_row ='<tr id="input_row">\
                      <td><input id="input1"></td>\
                      <td><input id="input2"></td>\
                      <td><button onclick="save_row()">save</button></td>\
                    </tr>';

    var table_element = document.getElementById("data_table");

    //do nothing if input_row already exists
    if(document.getElementById("input_row")) {

        alert("input row already exists !");
    }
    else {

        table_element.innerHTML = table_element.innerHTML + input_row;
    }

  }

// function called when Save button is clicked
function save_row()
  {
     var field_val1 = document.getElementById("input1").value;
     var field_val2 = document.getElementById("input2").value;

     //unique id for each added data row needed when reading data directly from table
     var data_id = data_dict.length;

     //push the data to data dictionary

     data_dict.push({
        key:  data_id,
        value: [field_val1,field_val2]
    });

     var data_row ='<tr>\
                      <td id="data_field1'+data_id+'">'+field_val1+'</td>\
                       <td id="data_field2'+data_id+'">'+field_val2+'</td>\
                      <td></td>\
                    </tr>';

    // remove input row         
     document.getElementById("input_row").remove();
     //append data to table
     var table_element = document.getElementById("data_table");
     table_element.innerHTML = table_element.innerHTML + data_row;
  }


  // send data to  django views

  function update_database() {

    var csrf_token = 'your_csrf_token';
    $.ajax({
          method: 'POST',
          url: 'update_database', // name of your djnago view
          data: {"datatobeupdated":data_dict,"csrfmiddlewaretoken" : csrf_token},
          success: function (response) {

               //when executed succesfully empty the data_dict and table

               data_dict = [];
               var table_element = document.getElementById("data_table");
               table_element.innerHTML = "";

          },
          error: function (response) {

                alert("Something Went Wrong");
          }
      });

  }

Html 表格是：

    <table>
        <thead>
            <tr><th title="Field #1">Field1</th>
            <th title="Field #2">Field2</th>
            </tr>
        </thead>
        <tbody id="data_table">

        </tbody>
    </table>

    <button onclick="Add_input_row()">Add row</button>

    <button onclick="Update()">Update</button>

您可以在 django 视图中访问数据，例如：

def update_database(request):
    if request.is_ajax():
       request_data = request.POST

       ## data dictionary received
       datatobeupdated = request_data['datatobeupdated']

【讨论】：