回顾
jQuery AJAX 的方法已经学了几个,这次又学习了$.getJSON()方法,对比这些方法的实现,发现原理和语法上都是很相像的,jQuery的这种封装和实现真使得AJAX的实现变得统一和简单。
$.getJSON()认识
从方法的名字上容易知道,通过GET方式获取JSON数据。JSON是什么,请看这里JSON学习及解析 。
$.getJSON() 语法
getJSON(url,[data],[callback])
参数 |
说明 |
url |
必需。规定将请求发送的URL. |
data |
可选。待发送 Key/value 参数. |
callback | 可选。载入成功时回调函数. |
相当于$.get: $.get(url, [data],[callback], "json")
也相当于$.AJAX的简写:
$.ajax({
url: url,
data: data,
success: callback,
dataType: json
});
$.getJSON()小例
调用后台asp.net页面(一般应用程序)生成的json数据
前台页面
<!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>jquery获取json数据</title>
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript">
function getData(){
$("#list").html(""); //清空列表中的数据
//发送ajax请求
$.getJSON(
"jsondata.ashx", //产生JSON数据的服务端页面
{name:"test",age:20}, //向服务器发出的查询字符串(此参数可选)
//对返回的JSON数据进行处理,本例以列表的形式呈现
function(json){
//循环取json中的数据,并呈现在列表中
$.each(json,function(i){
$("#list").append("<li>name:"+json[i].name+" Age:"+json[i].age+"</li>")
})
})
}
</script>
</head>
<body>
<input id="Button1" type="button" value="获取数据" onclick="getData()" />
<ul id="list"></ul>
</body>
</html>
一般应用程序(jsonData.ashx)
<%@ WebHandler Language="C#" Class="jsonData" %>
using System;
using System.Web;
public class jsonData : IHttpHandler {
public void ProcessRequest (HttpContext context) {
context.Response.ContentType = "text/plain";
string data = "[{name:\"ants\",age:24},{name:\"lele\",age:23}]"; //构建的json数据
//下面两句是用来测试前台向此页面发出的查询字符
string querystrname = context.Request.QueryString.GetValues("name")[0]; //取查询字符串中namer的值
string querystage = context.Request.QueryString.GetValues("age")[0]; //取查询字符串中age的值
context.Response.Write(data);
}
public bool IsReusable {
get {
return false;
}
}
}
运行结果:JSON的数据。
未完结
第四个"未完结",学习无止境,jQuery AJAX的认识阶段暂告一段落。不怕不知道,就怕不知道,在项目中能想到,才能用到,才能高效的发挥它的作用。