0

出于学习目的，我创建了一个简单的应用程序，它基本上通过向数据库添加一个值$.post并返回与 JSON 同时更新的结果。

最大的问题是，在添加和更新时，会使用空元素进行更新。示例：如果我已经添加了 5 个项目，当再添加一个项目时，它会刷新并返回已经有的 5 个项目，加上 5 个空项目和一个带有发送值的项目。

下面是为 jQuery 发送的代码：

send_btn.bind('click', function () {

    var that = $(this),
        input_val = input_word.find('input').val();

    that.find('.wrp').css('margin-left', -152);

    $.post('post.php', { palavra: input_val }, function (data) {
        console.log(data);
        that.find('.wrp').css('margin-left', 0);
        update();
    });

});

下面是接收信息的 PHP 文件：post.php

$_palavra = $_POST['palavra'];
$query = mysql_query("INSERT INTO `glaubersampaio`.`postit` (`ID`, `PALAVRA`, `MOSTRAR`) VALUES (NULL, '".$_palavra."', '1');");

update()功能：

function update() {
    $.getJSON('request.php', function (data) {
        for (i = 0; i < data.length; i++) {
            $('<li class="postit" id="postit-' + data[i].id + '"></li>').appendTo(quadro.find('ul'));
            $('#postit-' + data[i].id).html('<h4>' + data[i].palavra + '</h4>');
            $('<div class="remover">REMOVER?</div>').appendTo('#postit-' + data[i].id);

        }
    })
        .done(function () {
        quadro.find('.loader').hide();
    });
}

发出申请的 PHP 文件：request.php

 $query = mysql_query("SELECT * FROM `postit`");
$dados = array();

while($a = mysql_fetch_array($query)) {

    $ID = $a['ID'];
    $PALAVRA = $a['PALAVRA'];
    $MOSTRAR = $a['MOSTRAR'];

    array_push($dados, array("id"=>$ID, "palavra"=>$PALAVRA, "mostrar"=>$MOSTRAR));

}

echo json_encode($dados);
4

1 回答 1

1

问题在于你的update()功能。假设您的列表中已经有 5 个项目，然后添加一个新项目，它保存在数据库中，然后调用 update() 查询表中的所有数据，因此您的 JSON 响应包括您之前的 5 个项目加上新项目，现在您遍历所有这些并将它们附加到您的列表中，附加意味着它们被添加到最后一个元素之后，因此您的原始 5 加上查询中的 5 和您的新项目是您在表中看到的结果.

为什么新的5是空的？因为您使用这一行来创建一个新项目：

$('<li class="postit" id="postit-' + data[i].id + '"></li>')

但是您已经有一个具有该 ID 的项目，因此正在生成无效的 HTML 标记，并且当您尝试在此处设置内容时：

$('#postit-' + data[i].id).html('<h4>' + data[i].palavra + '</h4>');

只有具有 Id 的第一个元素会被修改。

解决方案是什么？你有几个选择。第一个是在从请求查询中添加元素之前清空列表，这样您就可以清除当前项目并从查询数据中重新填充完整的表。

$.getJSON('request.php', function (data) {
    quadro.find('ul').empty();
    for (i = 0; i < data.length; i++) {
        $('<li class="postit" id="postit-' + data[i].id + '"></li>').appendTo(quadro.find('ul'));
        $('#postit-' + data[i].id).html('<h4>' + data[i].palavra + '</h4>');
        $('<div class="remover">REMOVER?</div>').appendTo('#postit-' + data[i].id);
    }
})

但更有效的方法是以某种方式获取表中最旧 id 的引用，并将其发送request.php到仅返回 id 大于该值的元素。就像是

update()功能

var lastID = 0;
function update() {
    $.getJSON('request.php', {lastID: lastID}, function (data) {
        for (i = 0; i < data.length; i++) {
            //apend element
            if(i == data.length-1)
                lastID = data[i].id;
        }
    });
}

而在request.php

$lastID = isset($_POST['lastID']): $_POST['lastID'] : 0;
$query = mysql_query("SELECT * FROM `postit` WHERE ID > $lastID ORDER BY ID ASC");
于 2013-07-27T07:01:35.733 回答