现在的位置: 首页 > 综合 > 正文

jQuery读取JSON文件内容的例子

2013年08月13日 ⁄ 综合 ⁄ 共 1800字 ⁄ 字号 评论关闭

 

Json.html文件:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "
http://www.w3.org/TR/html4/strict.dtd

">
<html>
 <head>
  <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
  <title>Json Document</title>
  <script type="text/javascript" src="lib/jquery/jquery-1.3.2.js"></script>
  <script type="text/javascript">
   $(function(){
    $("#button").click(function(){
     $.getJSON( b.json ,function(data){  //

getJSON方法获得json文件的代码,其中的回调函数的参数data就是json代码

      $("#json").empty();  //清空带“json” ID的div标签的内容

      $.each(data,function(entryIndex,entry){ //each方法遍历json文件中的对象,entryIndex是当前索引,
entry是当前项
       var html="<div class= entry >";
       html += "<h3 class= term >"+entry[ term ]+ </h3> ;
       html += "<div class= part >"+entry[ part ]+"</div>";
       html += "<div class= definition >"+entry[ definition ];
       if(entry[ quote ]){
        html+="<div class= quote >";
        $.each(entry[ quote ],function(quoteIndex,line){
         html+="<p>"+line+"</p>";
        });
        html+="</div>";
       }
       html+="</div>";
       html +="</div>";
       $("#json").append(html);
      });
     });
    });
   }); 

  </script>
 </head>
 <body>
  <div id="button"><b>Get Json Document</b></div>
  <div id="json"></div>
 </body>
</html>

b.json文件:

/*
 * JSON File
 * Website:http://www.supersha.cn
 *autoor:沙锋
 * This comment may need to be removed for proper parsing
 */
[
 {
 "term":"BACCHUS",
 "part":"n.",
 "definition":"A convenient deity invented by the ancients as an excuse for getting drunk.",
 "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 he can t find you."
 },
 {
 "term":"BEARD",
 "part":"n.",
 "definition":"The hair that is commonly cut off by those who justly execrate the absurd Chinese custom of shaving the bead."
 }
]

抱歉!评论已关闭.