Php Ajax自动保存多个字段

我有一个页面，其中的字段可以通过contenteditable进行编辑。在用户编辑字段后，我将通过ajax自动保存字段。问题是，我在同一页上有多个字段，当我尝试自动保存多个字段时，要么一个字段不起作用，要么被另一个字段的相同内容覆盖

这是我用来更新数据库的代码，它的工作方式正是我希望名称字段的工作方式

$('.editname').keyup(function() {
delay(function(){
    var name= $('.editname').text();
    $.ajax({
        type:"post",
        url:"update.php",
        data:"name="+name,
        success:function(data){
            console.log('success!');
        }
    });
}, 500 );
});

var delay = (function(){
var timer = 0;
return function(callback, ms){
    clearTimeout (timer);
    timer = setTimeout(callback, ms);
};
})();

但是，如果我试图像下面那样编辑它，或者复制它并给它一个不同的名称，那么它将无法正常工作，无法随第一个字段一起更新另一个字段

$('.editname').keyup(function() {
delay(function(){
    var name= $('.editname').text();
    $.ajax({
        type:"post",
        url:"update.php",
        data:"name="+name,
        success:function(data){
            console.log('success!');
        }
    });
}, 500 );
});

$('.editsummary').keyup(function() {
delay(function(){
    var summary= $('.editsummary').text();
    $.ajax({
        type:"post",
        url:"update.php",
        data:"summary="+summary,
        success:function(data){
            console.log('success!');
        }
    });
}, 500 );
});

var delay = (function(){
var timer = 0;
return function(callback, ms){
    clearTimeout (timer);
    timer = setTimeout(callback, ms);
};
})();

---

在上面的代码块中我做错了什么？

看起来像是开发人员在复制和粘贴代码时遇到的常见错误

var name= $('.editsummary').text();

应改为：

var summary = $('.editsummary').text();

编辑

这就是你如何正确地做到这一点。拥有一个通用的自动保存处理程序并重新使用

例如html/js：

<script type="text/javascript" src="http://code.jquery.com/jquery-1.10.2.min.js"></script>
<script type="text/javascript">

// When Page Loads
$(document).ready(function()
{
    // Handle Auto Save
    $('.autosaveEdit').keyup(function() {
        var fieldName = $(this).attr('name');
        var fieldValue = $(this).val();
        delay(function() {
            $.ajax({
                type: "post",
                url: "update.php",
                data: { fName: fieldName, fValue: fieldValue },
                success: function(data) {
                    console.log('success!');
                }
            });
        }, 500 );
    });

});

var delay = (function() {
    var timer = 0;
    return function(callback, ms) {
        clearTimeout (timer);
        timer = setTimeout(callback, ms);
    };
})();

</script>

Firstname: <input type="text" class="autosaveEdit" name="firstname" />
<br />
Lastname: <input type="text" class="autosaveEdit" name="lastname" />

---

看起来像是开发人员在复制和粘贴代码时遇到的常见错误

var name= $('.editsummary').text();

应改为：

var summary = $('.editsummary').text();

编辑

这就是你如何正确地做到这一点。拥有一个通用的自动保存处理程序并重新使用

例如html/js：

<script type="text/javascript" src="http://code.jquery.com/jquery-1.10.2.min.js"></script>
<script type="text/javascript">

// When Page Loads
$(document).ready(function()
{
    // Handle Auto Save
    $('.autosaveEdit').keyup(function() {
        var fieldName = $(this).attr('name');
        var fieldValue = $(this).val();
        delay(function() {
            $.ajax({
                type: "post",
                url: "update.php",
                data: { fName: fieldName, fValue: fieldValue },
                success: function(data) {
                    console.log('success!');
                }
            });
        }, 500 );
    });

});

var delay = (function() {
    var timer = 0;
    return function(callback, ms) {
        clearTimeout (timer);
        timer = setTimeout(callback, ms);
    };
})();

</script>

Firstname: <input type="text" class="autosaveEdit" name="firstname" />
<br />
Lastname: <input type="text" class="autosaveEdit" name="lastname" />

---

我对您的示例进行了一些调整，以使其与JS Fiddle配合使用：

---

它工作正常。您可以打开网络控制台，查看正在发送的流量。

我对您的示例进行了一些调整，以使其与JS Fiddle配合使用：

---

它工作正常。您可以打开网络控制台，查看发送的流量。

如何命名字段？我的意思是所有字段都有属性name=name或类似于这个name=name[]的东西？您如何命名字段？我的意思是所有字段都有属性name=name或类似于这个name=name[]的东西？哎呀！当然，当我问这个问题时，我粘贴了错误的代码，但是按照您建议的方式修复了代码，它正确地更新了摘要字段，并删除了名称字段中的任何数据。请参阅我更新的回答。我想你得稍微更新一下你的代码。试试我的例子，一旦你弄明白了它是如何工作的，更新你的代码就很容易了！当然，当我问这个问题时，我粘贴了错误的代码，但是按照您建议的方式修复了代码，它正确地更新了摘要字段，并删除了名称字段中的任何数据。请参阅我更新的回答。我想你得稍微更新一下你的代码。试试我的例子，一旦你弄清楚它是如何工作的，更新你的代码就很容易了。