Javascript新手：如何避免发送未更改的数据？

Question

我是 Javascript 新手，我想发布输入复选框的序列化数据。数据被发送到服务器以更新 SQL 表中的相应字段。稍后，用户可以查看他第一次做出的选择并取消选择一些复选框。如果我理解得很好，只会发送选定的项目，而不是未选择的项目。如何发送更新新选择的项目和新未选择的项目所需的所有信息？

我找到的唯一解决方案是进行 2 次更新：第一次将所有行重置为 0，第二次将在序列化数组中发送的选定项目（新选择或未选择）设置为 1。有没有更优化的方法来完成这项工作？理想情况下，我只会更新已更改的数据。有可能吗？

问候， 帕特里克

Answer 1

如果我理解正确，您可以过滤复选框，然后您也可以将未选中的框添加到参数中。

我在 SO 找到了代码。见this question。

下面的演示和这里的jsfiddle 仅在用户更改数据时才进行 ajax 发布。不确定这是否是您想要的。

（SO 的演示稍作修改，因为需要 JSONP 才能获得没有CORS 错误。）

var data = "";

$('form').submit(function (evt) {
    evt.preventDefault();
    //console.log($(this).serialize());
    var formData = $(this).serialize();

    // source from this SO question https://stackoverflow.com/questions/10147149/how-can-i-override-jquerys-serialize-to-include-unchecked-checkboxes
    // include unchecked checkboxes. use filter to only include unchecked boxes.
    $.each($('form input[type=checkbox]')
        .filter(function (idx) {
        return $(this).prop('checked') === false
    }),

    function (idx, el) {
        // attach matched element names to the formData with a chosen value.
        var emptyVal = "off";
        formData += '&' + $(el).attr('name') + '=' + emptyVal;
    });
    
    console.log(formData);
    if ( data != formData ) { // check if user changed the data.
        $.ajax({
            url: 'http://jsfiddle.net/echo/jsonp/',
            type: 'POST',
            //data: formData, // this will work but for jsfiddle echo the code below is required.
            dataType: "jsonp",
            data: {
                json: JSON.stringify({
                    serialized: formData
                }),
                delay: 1
            },
            success: function(res) {
                console.log('posted: ', res);
            }
        });
    }
    
    data = formData;
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form>
    <label for="first">check1</label>
    <input name="first" id="first" type="checkbox" />
    <label for="second">check2</label>
    <input name="second" id="second" type="checkbox" />
    <label for="third">check3</label>
    <input name="third" id="third" type="checkbox" />
    <label for="fourth">check4</label>
    <input name="fourth" id="fourth" type="checkbox" />
    <input type="submit" value="update" />
</form>