//未完成的代码
$(document).ready(function() {
$('#letter-b a').click(function(event) { event.preventDefault();
$.getJSON('b.json', function(data) {
});
});
});
我们在此使用了匿名函数表达式作为回调函数，这在jQuery代码中很常见，主要是为了保持 代码简洁。当然，对函数声明的引用同样也可以作为回调函数。
这样，我们就可以在函数中通过data变量来遍历JSON数据结构了。具体来说，需要迭代顶 级数组，为每个项构建相应的HTML代码。虽然可以在这里使用标准的for循环，但我们要借此机会介绍jQuery的另一个实用全局函数$.each(),在第5章中，我们曾看到过它的对应方 法.each()。$.each()函数不操作jQuery对象，它以数组或对象作为第一个参数，以回调函数 作为第二个参数。此外，还需要将每次循环中数组或对象的当前索引和当前项作为回调函数的两 个参数，参见代码清单6-5。
代码清单6-5
复制代码 代码如下:
$(document).ready(function() {
$('#letter-b a').click(function(event) { event.preventDefault();
$.getJSON('b.json', function(data) { var html ='';
$.each(data, function(entryIndex, entry) { html += '<div>';
html += '<h3>' + entry.term + '</h3>';
html += '<div>' + entry.part + '</div>';
html += '<div>';
html += entry.definition;
html += '</div>';
html += '</div>';
});
$('#dictionary').html(html);
});
});
});
这里通过$.each()函数依次遍历每个项，并使用entry对象的内容构建起HTML代码结构。 构建好HTML之后，通过.html()把它插人到<div>*，替换其中原有的所 有内容。
安全的HTML
这种方法要求数据中包含可以直接用来构建HTML的安全内容，例如，数据 中不能包含任何<字符。
现在所剩的就是处理词条中的引用语了，这需要使用另一个$.each()循环，参见代码清 单 6-6。
代码清单6-6
复制代码 代码如下:
$(document).ready(function() {
$('#letter-b a').click(function(event) { event.preventDefault();
$.getJSON('b.json', function(data) { var html ='';
$.each(data, function(entryIndex, entry) { html += '<div>';
html += '<h3>' + entry.term + '</h3>'; html += '<div>' + entry.part + '</div>';
html += '<div class=MdefinitionM>'; html += entry.definition; if (entry.quote) {
html += '<div class=，，quote，，>';
$.each(entry.quote, function(lineIndex, line) {
html += '<div class=Hquote-lineH>' + line + '</div>';
})；
if (entry.author) {
html += '<div class=Hquote-authorH>' + entry.author + '</div>';
}
html += '</div>';
}
html += '</div>'; html += '</div>';
});
$('#dictionary').html(html);
});
});
});
编写完这些代码后，就可以单击下一个B链接来验证我们的成果了，页面右侧 出现了相应的字典条目。
尽管JSON格式很简洁，但它却不容许任何错误。所有方括号、花括号、引号和逗号都必须 合理且正确地使用，否则文件不会加载。而且，在多数浏览器中，当文件加载失败时我们看不到 任何错误信息；脚本只是静默地彻底终止运转。
以上就是本文的全部内容了，希望小伙伴们能够喜欢，能够对ajax操作javascript对象有新的认识。
您可能感兴趣的文章: