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)

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

print_r($_POST)

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

Answer 2

我稍微调整了你的例子，以便与JS Fiddle合作：

http://jsfiddle.net/eHz4t/

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

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

Ajax自动保存多个字段

2 个答案: