2

ajaxリクエストが機能していない（指定されたURLにリクエストを送信していない）jQueryオートコンプリートhttp://jqueryui.com/demos/autocomplete/#remote-jsonpを使用しています

jQueryコードは次のとおりです。

$("#add-keywords").autocomplete({
    source: function( request, response ) {
        var q = $("#add-keywords").val();
        $.ajax({
            url: "/keywords_suggestions/",
            dataType: "json",
            data: {
                    query: q
            }
        });
    },
    minLength: 2,
    select: function( event, ui ) {
            log( ui.item ?
                "Selected: " + ui.item.label :
                "Nothing selected, input was " + this.value);
    }
});

要求元の URL はこれhttp://127.0.0.1:8000/keywords_suggestions/である必要がありますが、送信先ですhttp://127.0.0.1:8000/information/?query=web(このページには jquery オートコンプリート機能が実装されていますhttp://127.0.0.1:8000/information/) 。

更新-1

ブラウザで /keywords_suggestions/ ページを確認したところ、Django サーバー コードが HttpResponse を返さなかったことを示しています。これが問題の原因ですか？理解できませんでした。オートコンプリート自体からのリクエスト URL が正しくありません。では、この Django サーバー コードはどのようにして問題を引き起こすのでしょうか?

誰か私が犯した過ちを教えてもらえますか? ありがとう！

4

3 に答える 3

0 
$("#add-keywords").autocomplete({
    source: function( request, response ) {
        var q = $("#add-keywords").val();
        $.ajax({
            url: "/keywords_suggestions/",
            dataType: "json",
            data: {
                    query: q
            },
            success: function(data) {
                // do something here with the returned data
                console.log(data);
            }
        });
    },
    minLength: 2,
    select: function( event, ui ) {
            log( ui.item ?
                "Selected: " + ui.item.label :
                "Nothing selected, input was " + this.value);
    }
});

前述のように、$.ajax 呼び出しに渡すデータ オブジェクトで「成功」コールバック関数を定義する必要があります。これは、データが返されたら、そのデータをどう処理するかを jQuery に指示します。

もちろん、再構築について考える必要があるかもしれません.AJAXリクエストはデフォルトで非同期的に実行されます。つまり、ブラウザはサーバーがAJAX呼び出しからデータを返すのを待っているので、残りのJavascriptコードを実行し続けます. この場合、「オートコンプリート」関数の呼び出しは、データがサーバーから返される前に発生する可能性が高く、それは良くありません!

したがって、私が間違っていなければ、この JS を次のように再構築する必要があります。

1.) たとえば、「変更」イベントを「#add-keywords」にバインドします...

2.) ...ユーザーが入力を開始すると、ajax 呼び出しが実行されるようにします。

3.) 次に、そのデータが正常に返されたら、現在の ajax 呼び出しを詰め込もうとしているオートコンプリート呼び出しを実行します。

これでうまくいくと思います。それがどうなるか教えてください。

于 2012-06-11T15:11:01.527 に答える