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

Posted 2023-02-24

【中文标题】Django - 如何使用 JQuery Ajax 插入多个表单数据

【英文标题】：Django - How to Insert Multiple Form Data using JQuery Ajax

【发布时间】：2020-07-31 19:04:49

【问题描述】：

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

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

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

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

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