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

Question

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

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

此致，帕特里克

Answer 1

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

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

下面的演示和此处 jsfiddle 仅在用户更改数据时执行 ajax post。不确定这是不是你想要的。

（SO 的演示有点修改，因为要求 JSONP 不会出现 CORS 错误。）

var data = "";

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

    // source from this SO question 
    // 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>

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

Newbie to Javascript: how to avoid sending data that have not changed?

javascript

checkbox

post

sql-update