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

Question

我想执行类似下面视频中描述的任务。

https:/youtu.beNoAdMtqtrTA?t=2156。

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

任何参考资料或任何示例代码将是非常感激的。谢谢你。

Answer 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']