jQuery AJAX —篇四 $.getJSON()

回顾

　　jQuery AJAX 的方法已经学了几个，这次又学习了$.getJSON()方法，对比这些方法的实现，发现原理和语法上都是很相像的，jQuery的这种封装和实现真使得AJAX的实现变得统一和简单。

　　$.getJSON()认识

　　　　从方法的名字上容易知道，通过GET方式获取JSON数据。JSON是什么，请看这里JSON学习及解析 。

　　$.getJSON() 语法

 

        getJSON(url,[data],[callback])
参数 说明
url 必需。规定将请求发送的URL.
data 可选。待发送 Key/value 参数.
callback 可选。载入成功时回调函数.

　　参数和其它jQuery AJAX的方法参数所代表一样。

 

　　相当于$.get： $.get(url, [data],[callback], "json")

　　也相当于$.AJAX的简写：

 

$.ajax({
  url: url,
  data: data,
  success: callback,
  dataType: json
});

 

　　$.getJSON()小例

　　调用后台asp.NET页面(一般应用程序)生成的json数据

　　前台页面

 

[html] view plain copy
 
 在CODE上查看代码片派生到我的代码片
  1. <span style="font-size:14px;"><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">  
  2. <html xmlns="http://www.w3.org/1999/xhtml">  
  3. <head>  
  4. 　　<title>jquery获取json数据</title>  
  5. 　　<script type="text/javascript" src="js/jquery.js"></script>  
  6. 　　<script type="text/javascript">  
  7. 　　　　function getData(){  
  8. 　　　　　　$("#list").html("");　　　　　//清空列表中的数据  
  9. 　　　　　　//发送ajax请求  
  10. 　　　　　　$.getJSON(  
  11. 　　　　　　　　"jsondata.ashx",　　　　　//产生JSON数据的服务端页面  
  12. 　　　　　　　　{name:"test",age:20},　　//向服务器发出的查询字符串（此参数可选）  
  13. 　　　　　　　　//对返回的JSON数据进行处理，本例以列表的形式呈现  
  14. 　　　　　　　　function(json){  
  15. 　　　　　　　　　　//循环取json中的数据,并呈现在列表中  
  16. 　　　　　　　　　　$.each(json,function(i){  
  17. 　　　　　　　　　　　　$("#list").append("<li>name:"+json[i].name+" Age:"+json[i].age+"</li>")  
  18. 　　　　　　　　　　})  
  19. 　　　　　　　　})  
  20. 　　　　　}  
  21. 　　</script>  
  22. </head>  
  23. <body>  
  24. 　　<input id="Button1" type="button" value="获取数据" onclick="getData()" />  
  25. 　　<ul id="list"></ul>  
  26. </body>  
  27. </html> </span>  

 

 

　　一般应用程序（jsonData.ashx）

 

[csharp] view plain copy
 
 在CODE上查看代码片派生到我的代码片
  1. <span style="font-size:14px;"><%@ WebHandler Language="C#" Class="jsonData" %>  
  2. using System;  
  3. using System.Web;  
  4.   
  5. public class jsonData : IHttpHandler {  
  6. 　　public void ProcessRequest (HttpContext context) {  
  7. 　　　　context.Response.ContentType = "text/plain";  
  8. 　　　　string data = "[{name:\"ants\",age:24},{name:\"lele\",age:23}]";　　　　　//构建的json数据  
  9. 　　　　//下面两句是用来测试前台向此页面发出的查询字符  
  10. 　　　　string querystrname = context.Request.QueryString.GetValues("name")[0];　//取查询字符串中namer的值  
  11. 　　　　string querystage = context.Request.QueryString.GetValues("age")[0];　　//取查询字符串中age的值  
  12. 　　　　context.Response.Write(data);  
  13. 　　}  
  14. 　　public bool IsReusable {  
  15. 　　　　get {  
  16. 　　　　　return false;  
  17. 　　　　}  
  18. 　　}  
  19. } </span>  


　　运行结果：JSON的数据。

 

 

　　未完结

　　第四个"未完结"，学习无止境，jQuery AJAX的认识阶段暂告一段落。不怕不知道，就怕不知道，在项目中能想到，才能用到，才能高效的发挥它的作用。

posted @ 2017-01-15 17:11  天涯海角路  阅读(151)  评论(0)    收藏  举报