0

これまで、私はdjangoテンプレートシステムを使用してこの種のアクションを実行してきました。htmlテンプレートを使用してajaxリクエストに応答するだけです。

現在、オートコンプリート検索機能を実装しようとしています。json形式で応答をクライアントに送り返したいと思います。

すべてが良好で、この時点までに設定されています。これは私のjQueryの部分です：

$(document).ready(function(){
    $("#id_q").keyup(function(){ //the form text input
        autocomplete(this.value);
    });

    function autocomplete(inputString) {
        if(inputString.length == 0) {
            $('#autocomplete').fadeOut();
        }
        else {
            $.get("/autocomplete/", {q: ""+inputString+""}, function(data) {
                $('#autocomplete').fadeIn();
                $('#autocomplete').html(data);
            });
        }
    }
});

djangoテンプレートを応答として使用すると、＃autocomplete divが.html（data）で期待どおりに表示されました。これは、テンプレートにhtmlを事前に設定していたためです。

サーバーから送信されたデータ（json形式）を処理するにはどうすればよいですか？データは次のようになります。

[{'title':'titleString', 'descr':'desriptionString', 'url':'itemAbsoluteUrl'}, ..]

#autocomplete htmlを取得するには、次のようにします。

<li><a href="data.url">data.title<br>data.descr</li>

フィードバックをありがとう！

4

2 に答える 2

2

まず、戻りデータをJSONオブジェクトとしてフォーマットするには、get呼び出しで戻りタイプがjsonであることを指定する必要があります。その後、jsonキーと値のペアに基づいてデータを参照します（例：data.results）。（結果はJSONオブジェクトのキーである必要があることに注意してください）。

$.get("/autocomplete/", {q: ""+inputString+""}, function(data) {
            $('#autocomplete').fadeIn();
            $('#autocomplete').html(data.results);
}, "json");

現在の形式はわかりませんが、明確にするために、JSONを介して生のHTMLを送信したくない場合があります。代わりに、クライアントページにHTMLを保持し、データを返してデータを入力します。

于 2012-07-19T12:54:29.877 に答える
0

試す

var li = $('<li><a href="'+data.url+'">'+data.title+'<br/>'+data.descr+'</a></li>')

そして、あなたはあなたが望む場所に挿入することができliます、または

$('#autocomplete').html('<li><a href="'+data.url+'">'+data.title+'<br/>'+data.descr+'</a></li>');

結果を反復処理するには

$.each(results, function(index, value){
...
})
于 2012-07-19T13:40:56.773 に答える