0

研究目的で、基本的に$.postJSONを介してデータベースに値を追加し、同時に更新された結果を返す単純なアプリケーションを作成しました。

大きな問題は、追加および更新時に空の要素で更新されることです。例: 既に 5 つのアイテムが追加されている場合、もう 1 つのアイテムを追加すると、更新されて、既に存在していた 5 つのアイテムに加えて、5 つの空のアイテムと、送信された値を含む 1 つのアイテムが返されます。

以下は、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 を持つ最初の要素のみが変更されます。

解決策は何ですか？いくつかのオプションがあります。1 つ目は、リクエスト クエリから要素を追加する前にリストを空にすることです。そのため、現在のアイテムをクリアし、クエリ データから完全なテーブルを再設定します。

$.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 に答える