ajax - JQuery - 迭代 JSON 响应

Question

到目前为止的故事......

尝试学习 JS 和 JQuery，我想我会从基础开始，然后尝试一点 AJAX “键入时搜索”的魔法。首先，我只想正确处理 AJAX 部分并遍历返回的 JSON 对象并将其附加到无序列表中。我此时没有对输入的值与返回的 JSON 结果进行验证，我只想要一种受控的方式来确定何时执行 AJAX getJSON 调用。稍后，一旦我做对了，我将进行验证。

无论如何，我无法在 ul 中显示帐号。目前唯一显示的是li 中的AccountNumber而不是我的 ACCOUNT NUMBERS

我的 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

   ]

}

这也是我的 Fiddler 结果，证明我的 JSON 对象正在被返回。

编辑：

关于我想要实现的目标有很多疑问，所以这里是：

1. 学习 jQuery
2. 构建“键入时搜索”输入框。首先，我想首先正确处理 AJAX 部分，然后我将构建一个利用此功能的 MVC3 (ASP.NET) 应用程序，并整理 JQuery 代码，其中包括对输入与返回的 JSON 的验证。

下面的 Cheesos 答案对我有用，JSFiddle 可以在这里找到：

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

Answer 1

首先，我认为 keydown 可能是进行 json 调用的错误时间，或者至少......每次keydown 都进行 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”，它是一个数组。所以你不需要遍历对象中的所有项目。

这可能看起来像这样：

            $.each(JSONData.AccountNumber, function(i, item) {
                $('<li>').append(item).appendTo($ul);
            });

Answer 2

你可能想要的是这样的：

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

Answer 3

你的代码：

$.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');
});