1

こんにちは、助けてください。私は現在 Ajax と Json を学んでいるので、あまり経験がありません。

ページを更新せずにデータを取得するためにこのチュートリアルに従いましたが、いくつか懸念があります。

スクリプトは正常に動作します。私が見つけた唯一の問題は、更新を押すと、コンテンツを再度読み込むのに時間がかかることです (約 5 ～ 10 秒)。Firebug では、常にリクエストを送信しているため、継続的にバインドされていることがコンソールで確認できます。ここにコードHTMLがあります

<div class="ajax_results">
    <ul id="results"></ul>
</div>

PHP スクリプト

$query = "SELECT `img_id`, `image_name`, `title` FROM `images` ORDER BY `img_id` DESC LIMIT 5 ";
$run = mysqli_query($connection, $query) or die(mysqli_error($connection));

$json = array();
while ($row = mysqli_fetch_array($run, MYSQLI_ASSOC)) {
    array_push($json, array('image_name' => $row['image_name'],
                            'title' => $row['title']));
}
echo json_encode(array("json" => $json));

そしてJS

$(document).ready(function() {
    refresh();
});

function refresh() {
    setTimeout(function() { 
        update_content(); 
        refresh();
    }, 200);
}

function update_content() {
    $.getJSON("fetch_data.php", function(data) {
        $("ul#results").empty();
        $.each(data.json, function() {
            $("ul#results").append("<li><img src=\"img/uploads/"+this['image_name']+"\" /><br />"+this['title']+"</li>");
        });
    });
}

これは問題ですか?? どういうわけかコードを改善できますか?? どんな助けでもいただければ幸いです

追加のフィードバックを提供するため。$.getJSON が $(document).ready(function() に直接配置されている場合、コンテンツはより迅速に読み込まれますが、ページを更新しないとタイトルなどの更新が発生した場合は表示されません。私が実際に達成したいのはコンテンツをロードし、変更が発生した場合はページを更新せずにそれらを表示します。

4

1 に答える 1

0

ここに問題への別のアプローチがあります

$(function() {
    update_content();
});

function update_content() {
    $.getJSON("fetch_data.php", function(data) {
        $("ul#results").empty();
        $.each(data.json, function() {
            $("ul#results").append("<li><img src=\"img/uploads/"+this['image_name']+"\" /><br />"+this['title']+"</li>");
        });
        setTimeout(function(){
            update_content();
        }, 1000);
    });
}

ここでは、setTimeout 呼び出しを update_content() 関数に移動し、タイムアウトを増やしてブラウザにもう少し余裕を持たせました。個人的には、これを毎秒呼び出すことはしませんが、これは単なる例です。 10秒以上。

繰り返し発生させたくない場合は、setTimeout ブロック全体を削除してください。

$(function() {
    update_content();
});

function update_content() {
    $.getJSON("fetch_data.php", function(data) {
        $("ul#results").empty();
        $.each(data.json, function() {
            $("ul#results").append("<li><img src=\"img/uploads/"+this['image_name']+"\" /><br />"+this['title']+"</li>");
        });
    });
}
于 2013-09-04T08:32:37.940 に答える