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

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

本文关键字：数据 新手 何避免 Javascript      更新时间：2023-09-26

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

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

谨致问候，Patrick

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

我在SO找到了它的代码。看看这个问题。

下面的演示和这里的一个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>

相关文章：