php - div コンテンツをクリア

Question

$(function() {
    setInterval(function() {
        $.get("refresh.php", function(result) {
            $('#response').empty()
            .hide()
            .html(result)
            $("#response").append(result)
            .fadeIn("slow");
        });
    }, 5000);
});

実際、私のスクリプトは、refresh.php で 5 秒ごとにrefresh.phpにヒットします。mysql db からデータを取得し、次のようなテンプレートを作成します。

<table>
<tr><td>Name<td><td>$fetch['name']</td></tr>
</table>

firebugでrefresh.php送信応答を5秒後に1回だけチェックしましたが、すべてのブラウザで次のように結果が2回表示されます。

<table>
    <tr><td>Name<td><td>$fetch['name']</td></tr>
    </table>
<table>
    <tr><td>Name<td><td>$fetch['name']</td></tr>
    </table>

Answer 1

html最初に を使用し、次に を使用して、結果を 2 回表示しているため、結果が 2 回表示されますappend。

$(function() {
    setInterval(function() {
        $.get("refresh.php", function(result) {
            $('#response').empty()
            .hide()
            .html(result)                 // <==== Here
            $("#response").append(result) // <==== And here
            .fadeIn("slow");
        });
    }, 5000);
});

html要素のコンテンツを、指定したマークアップ (または要素) に置き換えます (emptyそれを使用する前に必要はありません)。指定したマークアップ (または要素) を要素にappend 追加します。

どちらかが必要です。私は一緒に行きhtmlます：

$(function() {
    setInterval(function() {
        $.get("refresh.php", function(result) {
            $('#response')
                .hide()
                .html(result)
                .fadeIn("slow");
        });
    }, 5000);
});

Answer 2

以下を使用します

$.get("refresh.php", function(result) {

    $("#response").html(result);
});