jQuery getJSON 示例

快乐无极 , 2011/05/31 00:44 , 开发文档 , 评论(1) , 阅读(15573) , Via 本站原创 | |

jQuery getJSON函数示例。官方函数说明:http://api.jquery.com/jQuery.getJSON/

注意如果获得的JSON如果有错误的话,将不会返回任何东西。推荐一个JSON校验的网站,有时候派得上用场:http://jsonlint.com/

XML/HTML 代码复制内容到剪贴板
        
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">  
  2.     
  3. <html xmlns="http://www.w3.org/1999/xhtml">  
  4.     
  5. <head>  
  6.     
  7.     <title>jquery获取json数据演示页面</title>  
  8.     
  9.     <script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script>  
  10.     
  11.     <script type="text/javascript">  
  12.     
  13.     function getData(){  
  14.     
  15.     $("#list").html("");//清空列表中的数据  
  16.     
  17.    //发送ajax请求  
  18.     
  19.    $.getJSON(  
  20.     
  21.     "t2.js",//产生JSON数据的服务端页面  
  22.     
  23.    //{name:"test"},//向服务器发出的查询字符串(此参数可选)  
  24.     
  25.    //对返回的JSON数据进行处理,本例以列表的形式呈现  
  26.     
  27.     function(json){        
  28.     
  29.    //循环取json中的数据,并呈现在列表中  
  30.     
  31.     $.each(json,function(i){        
  32.     
  33.     $("#list").append("<li>name:"+json[i].name+"  Age:"+json[i].age+"</li>");  
  34.     
  35.     })  
  36.     
  37.     })
  38.     
  39.     }  
  40.     
  41.       
  42.     
  43.     </script>  
  44.     
  45. </head>  
  46.     
  47. <body>  
  48.     
  49.     <input id="Button1" type="button" value="获取数据" onclick="getData()" />  
  50.     
  51.    <ul id="list">TEST</ul>  
  52.     
  53. </body>  
  54.     
  55. </html>  

t2.js代码:

JavaScript 代码复制内容到剪贴板
        
  1. [{"name":"ants","age":24},{"name":"lele","age":23}]  

结果:

        
  • name:ants  Age:24
  •     
  • name:lele  Age:23
Tags: ,
zhangdong88 Email
2017/09/09 12:53
尝试这个:json formatterjson formatter
分页: 1/1 第一页 1 最后页
发表评论

昵称

网址

电邮

打开HTML 打开UBB 打开表情 隐藏 记住我 [登入] [注册]