通过REST API的AJAX PUT请求传递唯一的表单域

Question

我有一个表单中有几个域，在Save上点击它会触发一个AJAX请求来更新我的数据。如果我填写表单中的所有字段进行更新，目前它只能工作，因为我通过$('#field').val()，但如果我只想更新其中一个字段，该怎么办？我如何能做到这一点，而不需要该领域的休息，因为我用这个多编辑基于数据的，我选择更新

下面

哪一行（S）是我的代码：

HTML ：

<form id="create_project" method="POST" enctype="multipart/form-data">{% csrf_token %} 
     <div> 
      <label>Priority:</label> 
       <select id="priority_field"> 
        <option selected="selected">Select Your Priority</option> 
        <option value="Low">Low</option> 
        <option value="Normal">Normal</option> 
        <option value="Medium">Medium</option> 
        <option value="High">High</option> 
        <option value="Critical">Critical</option> 
       </select><br> 
      <label>Assign To: </label> 
       <select id="assign_to_field" onchange="filter_by_users();"> 
        <option selected="selected">Select Your User</option> 
        <option value="None">None</option> 
        {% for user in selected_project.user.all %} 
         <option value="{{ user }}">{{ user }}</option> 
        {% endfor %} 
       </select> 
      <br> 
      <label> Start Date:</label> 
      <input type="date" class="form-control" id="start_date_field"><br> 
      <label>Duration:</label> 
      <input type="number" class="form-control" id="duration_field"><br> 
     </div> 
     <div class="modal-footer modal_styling"> 
      <button type="button" class="btn btn-primary" onclick="editForm()">Edit 
      </button> 
      <button type="button" class="btn btn-default" data-dismiss="modal">Cancel 
      </button> 
     </div> 

    </form> 

的javascript：

// TASK MULTI EDIT 
function editForm(){ 
    var selected_task = gantt.getSelectedTasks(); 
    for(var i = 0; i < selected_task.length; i++){ 
     var task = selected_task[i]; 
     var data = gantt.getTask(task); 
     $.ajax({ 
       type: 'PUT', 
       url: '/api/dashboard/workorder_detail/' + data.workorder_id + '/', 
       data: { "id" : data.workorder_id, 
         "priority": $('#priority_field').val(), 
         "assign_to": $('#assign_to_field').val(), 
         "start_date": $('#start_date_field').val(), 
         "duration": $('#duration_field').val(), 
        }, 
       success: function() { 
        location.reload(); 
       }, 
       error: function (err) { 
       alert("Failed"); 
       } 
     }) 
    } 
} 

任何帮助非常感谢，谢谢。

Answer 1

首先您应该处理哪些字段发生了变化，然后您可以选择将其作为参数发送给ajax请求。 这是侦听该领域已经下面的代码

改变，并添加类名称“已经改变的”

function changeEvent() { 
    if(!$(this).hasClass('has-changed')) 
     $(this).addClass('has-changed'); 
} 

此设置事件输入

$('#create_project input,select').on('change',changeEvent); 

然后可以选择更改的字段与

var postData = {}; 
    $('#create_project .has-changed').each(function (i,e) { 
     var id = $(e).attr('id'); 
     var value = $(e).val(); 
     postData[id]=value; 

    }); 

然后添加完POSTDATA在你的Ajax“数据”这类似

$.ajax({ 
      type: 'PUT', 
      url: '/api/dashboard/workorder_detail/' + data.workorder_id + '/', 
      data: postData, 
      success: function() { 
       location.reload(); 
      }, 
      error: function (err) { 
       alert("Failed"); 
      } 
     }) 

编辑： 你应该使用下面的代码之前“editForm”功能，因为这个代码没有从浏览器中点击编辑按钮之前阅读，你可以看到点击后它的工作原理，改变任何形式的项目，然后单击第二次在您的代码中编辑按钮。

function changeEvent() { 
     if(!$(this).hasClass('has-changed')) 
      $(this).addClass('has-changed'); 
    } 

$('#edit_form input,select').on('change',changeEvent); 

// TASK MULTI EDIT 
function editForm(){ 
    var selected_task = gantt.getSelectedTasks(); 



    var postData = {}; 
    $('#edit_form .has-changed').each(function (i,e) { 
     var id = $(e).attr('id'); 
     var value = $(e).val(); 
     postData[id]=value; 

    }); 
    for(var i = 0; i < selected_task.length; i++){ 
     var task = selected_task[i]; 
     var data = gantt.getTask(task); 
     $.ajax({ 
       type: 'PUT', 
       url: '/api/dashboard/workorder_detail/' + data.workorder_id + '/', 
       data: postData, 
       success: function() { 
        // location.reload(); 
        console.log(postData); 
       }, 
       error: function (err) { 
       alert("Failed"); 
       } 
     }) 
    } 
}