Ajax 自动保存多个字段答案

【问题标题】：Ajax autosave multiple fieldsAjax 自动保存多个字段
【发布时间】：2014-01-13 16:47:20
【问题描述】：

我有一个页面，其中包含可通过 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);
};
})();

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

【问题讨论】：

你是如何命名你的字段的？我的意思是所有字段都有属性 name="name" 或类似 name="name[]" 的东西？

标签： php jquery ajax autosave

【解决方案1】：

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

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" />

现在，在您的 update.php

上

<?php

// Get the post data
$fieldName = isset($_POST['fName']) ? $_POST['fName'] : '';
$fieldValue = isset($_POST['fValue']) ? $_POST['fValue'] : '';

// Now save the $fieldValue against $fieldName in your db (if neither is empty)

因此，在我的示例表单中，如果我开始编辑“名字”输入字段，自动保存会将以下内容发布到 update.php：

print_r($_POST)

Array
(
    [fName] => firstname
    [fValue] => hello
)

【讨论】：

糟糕！当然，当我问这个问题时，我粘贴了错误的代码，但是按照您建议的方式修复了代码，它会正确更新“摘要”字段并删除“名称”字段中的任何数据。
查看我的更新回复。我想你将不得不稍微更新你的代码。试试我的例子，一旦你弄清楚它是如何工作的，更新你的代码就很容易了。

【解决方案2】：

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

http://jsfiddle.net/eHz4t/

<div class="editname" contenteditable="true">my name</div>
<div class="editsummary"contenteditable>my summary</div>

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

【讨论】：