在线时间:8:00-16:00
迪恩网络APP
随时随地掌握行业动态
扫描二维码
关注迪恩网络微信公众号
通过请求获取充分格式化的HTML虽然很方便,但这也意味着必须在传输文本内容的同时也 传输很多HTML标签。有时候,我们希望能够尽量少传输一些数据,然后马上处理这些数据。在 这种情况,我们希望取得能够通过JavaScript进行遍历的数据结构。 1.取得JSON 前面我们曾经看到过,JavaScript对象是由一些“键-值”对组成的,而且还可以方便地使 用花括号({})来定义。另一方面,JavaScript的数组则可以使用方括号([])和隐式声明的 逐渐递增的键进行动态定义。将这两种语法组合起来,可以轻松地表达复杂而且庞大的数据 结构。 复制代码 代码如下: { "key": "value", "key 2":[ "array", "of", "items" ] } 在对象字面量和数组字面量的基础上,JSON格式的语法具有很强的表达能力,但对其中的 值也有一定的限制。例如,JSON规定所有对象键以及所有字符串值,都必须包含在双引号中。 而且,函数也不是有效的JSON值。由于存在这些限制,开发人员最好不手工编辑JSON,而应该 用服务器端语言来生成。 要了解JSON的语法要求以及它有哪些优势,都有哪些语言支持这种数据格 式,请访问 http://json.org/。如果用这种格式对字典中的解释进行编码,那么可能会有很多种编码方式。这里,我们把一 些字典的词条放在一个名叫b.json的JSON文件中,这个文件开头部分的代码如下: 复制代码 代码如下: [ { "term": "BACCHUS", "part": "n.", "definition": "A convenient deity invented by the...", "quote": [ "Is public worship, then, a sin,", "That for devotions paid to Bacchus", "The lictors dare to run us in,", "And resolutely thump and whack us?" ], "author": "Jorace" }, { "term": "BACKBITE", "part": "v.t.", "definition": "To speak of a man as you find him when..." }, { "term": "BEARD", "part": "n.", "definition": "The hair that is commonly cut off by..." }, ... file continues ... 要取得这些数据,可以使用$.getJS0N()方法,这个方法会在取得相应文件后对文件进行处理。在数据从服务器返回后,它只是一个简单的JSON格式的文本字符串。$.getJSON()方法 会解析这个字符串,并将处理得到的JavaScript对象提供给调用代码。 2.使用全局jQuery函数 到目前为止,我们使用的所荀Query方法都需要通过$()函数构建的一个jQuery对象进行调 用。通过选择符表达式,我们可以指定一组要操作的DOM节点,然后再用这些jQuery方法以某种 方式对它们进行操作。然而,$.getJS〇N()函数却不一样。从逻辑上说,没有该方法适用的DOM 元素;作为结果的对象只能提供给脚本,而不能插人到页面中。为此,getJS〇N()是作为全局 jQuery对象(由jQuery库定义的jQuery*$对象)的方法定义的,也就是说,它不是个别jQuery 对象实例(即通过$()函数创建的对象)的方法。 如果JavaScript中有类似其他面向对象语言中的类,那我们可以把$.getJS〇N()称为类方法。 为了便于理解,我们在这里称其为全局函数;实际上,为了不与其他函数名称发生冲突,这些全 局函数使用的是jQuery命名空间。 复制代码 代码如下: //未完成的代码 $(document).ready(function() { $('#letter-b a').click(function(event) { event.preventDefault(); $.getJSON('b.json'); }); }); 当单击按钮时,我们看不到以上代码的效果。因为虽然函数调用加载了文件,但是并没有告 诉JavaScript对返回的数据如何处理。为此,我们需要使用一个回调函数。 复制代码 代码如下: //未完成的代码 $(document).ready(function() { $('#letter-b a').click(function(event) { event.preventDefault(); $.getJSON('b.json', function(data) { }); }); }); 我们在此使用了匿名函数表达式作为回调函数,这在jQuery代码中很常见,主要是为了保持 代码简洁。当然,对函数声明的引用同样也可以作为回调函数。 复制代码 代码如下: $(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 class="entry">'; html += '<h3 class="term">' + entry.term + '</h3>'; html += '<div class="part">' + entry.part + '</div>'; html += '<div class="definition">'; html += entry.definition; html += '</div>'; html += '</div>'; }); $('#dictionary').html(html); }); }); }); 这里通过$.each()函数依次遍历每个项,并使用entry对象的内容构建起HTML代码结构。 构建好HTML之后,通过.html()把它插人到<div id="dictionary">*,替换其中原有的所 有内容。 安全的HTML 现在所剩的就是处理词条中的引用语了,这需要使用另一个$.each()循环,参见代码清 单 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 class="entry">'; html += '<h3 class="term">' + entry.term + '</h3>'; html += '<div class="part">' + 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对象有新的认识。 |
请发表评论