1

ストーリーこれまで....

JS と JQuery を学ぼうとしていて、基本から始めて、AJAX の「入力と同時に検索」の魔法を少し試してみようと思いました。まず、AJAX部分を正しく取得し、返されたJSONオブジェクトを反復処理して、順序付けられていないリストに追加したかっただけです。現時点では、入力された値と返された JSON の結果に対して検証を行っていません。AJAX getJSON 呼び出しをいつ実行するかを制御する方法が必要です。後で、これが正しくなったら検証を行います。

とにかく、ULに口座番号を表示するのに問題があります。現時点で表示されているのはアカウント番号のみで、私のアカウント番号ではありません

私のJSコードはここにあります：

http://jsfiddle.net/garfbradaz/HBYvq/54/

しかし、簡単にするために、ここにもあります：

$(document).ready(function() {
$("#livesearchinput").keydown(function(key) {
    $.ajaxSetup({
        cache: false
    });
    $.getJSON(" /gh/get/response.json//garfbradaz/MvcLiveSearch/tree/master/JSFiddleAjaxReponses/", function(JSONData) {
        $('<ul>').attr({
            id: "live-list"
        }).appendTo('div#livesearchesults');
        $.each(JSONData, function(i, item) {
            var li = $('<li>').append(i).appendTo('ul#live-list');
            //debugger;
        });

    });



});

}); </p>

私の JSON ファイルは github でホストされていますが、ここでも簡単に説明します。

https://github.com/garfbradaz/MvcLiveSearch/blob/master/JSFiddleAjaxReponses/demo.response.json

{

   "AccountNumber": [

      1000014,

      1015454,

      1000013,

      1000012,

      12

   ]

}

また、JSON オブジェクトが返されていることを証明する Fiddler の結果もここにあります。

ここに画像の説明を入力

編集：

私が達成しようとしていたことについて非常に多くの質問があったので、ここに示します：

  1. JQueryを学ぶ
  2. 「入力と同時に検索」入力ボックスを作成するには。最初に、最初に AJAX 部分を正しく取得したかったので、この機能を利用する MVC3 (ASP.NET) アプリケーションを構築し、さらに入力と返された JSON の検証を含む JQuery コードを整理しました。

以下の Cheesos の回答は役に立ちました。JSFiddle は次の場所にあります。

http://jsfiddle.net/garfbradaz/JYdTU/

4

3 に答える 3

2

まず、キーダウンはおそらくjson呼び出しを行うのに間違った時期だと思います。または、少なくとも...すべてのキーダウンでjson呼び出しを行うのは間違っています。それはあまりにも多くの呼び出しです。入力ボックスに「hello」と入力すると、約 0.8 秒以内に 5 つの json 要求と応答があります。

ただし、フラグを使用して、初回のみ json を取得するようにすることもできます。

このようなもの：

$(document).ready(function() {
    var $input = $("#livesearchinput"), filled = false;
    $.ajaxSetup({ cache: false });
    $input.keydown(function(key) {
        if (!filled) {
          filled = true;
          $.getJSON("json101.js", function(JSONData) {
            var $ul =
            $('<ul>')
                .attr({id: "live-list"})
                .appendTo('div#livesearchesults');
            $.each(JSONData, function(i, item) {
                $.each(item, function(j, val) {
                  $('<li>').append(val).appendTo($ul);
                });
            });
          });
        }
    });
});

重要なのは、インナーを使用したこと$.each()です。

アウター$.each()は多分不要です。受け取る JSON のオブジェクトには、配列である "AccountNumber" という要素が 1 つだけ含まれています。したがって、オブジェクト内のすべてのアイテムを反復処理する必要はありません。

それは次のようになります。

            $.each(JSONData.AccountNumber, function(i, item) {
                $('<li>').append(item).appendTo($ul);
            });
于 2012-06-14T21:00:21.037 に答える
1

おそらくあなたが望むのはこれです：

    $.each(JSONData.AccountNumber, function(i, item) {
        var li = $('<li>').append(item).appendTo('ul#live-list');
    });
于 2012-06-14T20:49:08.030 に答える
0

あなたのコード:

$.each(JSONData, function(i, item) {
    var li = $('<li>').append(i).appendTo('ul#live-list');
});

「外側の JSON 構造のキーと値を反復処理し、キーを出力する」と言います。最初のキーは「AccountNumber」なので、それを印刷することになります。

あなたがしたいことは、に格納されている配列を反復処理しJSONData.AccountNumber、値を出力することです:

$.each(JSONData.AccountNumber, function() {
    var li = $('<li>').append(this).appendTo('ul#live-list');
});
于 2012-06-14T21:53:02.383 に答える