Javascript 仅传递REST API中AJAX PUT请求的编辑表单字段

我有一个表单，里面有几个字段，点击Save按钮会触发一个AJAX请求来更新我的数据。目前，如果我要更新表单中的所有字段，因为我要传递$'field'.val，那么它只能起作用，但是如果我只想更新其中一个字段呢？我如何在不需要字段的其余部分的情况下执行此操作，因为我正在根据选择要更新的数据行进行多次编辑

下面是我的代码：

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");
                }
        })
    }
}

---

非常感谢您的帮助。

首先您应该处理哪些字段发生了更改，然后您可以选择作为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;

    });

然后在ajax“数据”属性中添加postData，如下所示

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

编辑： 您应该在编辑表单功能之前使用下面的代码，因为在单击“编辑”按钮之前，此代码并没有从浏览器中读取，您可以在单击并更改任何表单项后看到它的工作状态，并在代码中单击“第二次编辑”按钮

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");
                }
        })
    }
}

---

您好@Ferhat，非常感谢您的帮助，这看起来是可行的，让我在我的代码中实现这一点，稍后我会回复您，您肯定应该使用它@M.IzzatHi@Ferhat，我在上面添加了我的更新代码，它不起作用，因为显然postData传递的是一个空数组。我确信这是一个业余的错误，我正在研究它，如果你能看一看我发现，由于某些原因，数据只会在第二次点击编辑按钮时被推入postData数组，第一次按下它将发送一个空数组我已经编辑了你的答案。对不起，我是stackoverflow的新手，因此我不知道有什么编辑通知给你。这样您就可以在上次编辑的代码中看到我的答案了