jq代码学习22----- ajax $.getJSON()获取json文件

来源：互联网发布：revit mep软件下载编辑：程序博客网时间：2024/05/22 17:47

demo.html

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><title></title> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><style type="text/css">* { margin:0; padding:0;}body { font-size:12px;}.comment { margin-top:10px; padding:10px; border:1px solid #ccc;background:#DDD;}.comment h6 { font-weight:700; font-size:14px;}.para { margin-top:5px; text-indent:2em;background:#DDD;}</style> <!--   引入jQuery --><script src="../scripts/jquery.js" type="text/javascript"></script><script type="text/javascript">//<![CDATA[   $(function(){        $('#send').click(function() {             $.getJSON('test.json', function(data) {                 $('#resText').empty();                  var html = '';                  $.each( data  , function(commentIndex, comment) {                      html += '<div class="comment"><h6>' + comment['username'] + ':</h6><p class="para">' + comment['content'] + '</p></div>';                  })                 $('#resText').html(html);            })       })   })//]]></script></head><body> <br/> <p>     <input type="button" id="send" value="加载"/> </p><div  class="comment">已有评论：</div> <div id="resText" > </div></body></html>

test.json

[  {    "username": "张三",    "content": "沙发."  },  {    "username": "李四",    "content": "板凳."  },  {    "username": "王五",    "content": "地板."  }]

阅读全文

0 0