php - Ajax 自动保存多个字段

Question

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

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

Answer 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
)