jQuery AJAX —篇四 $.getJSON()

浏览数：18 / 时间：2015年06月09日

　　回顾

　　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数据

　　前台页面

<!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的数据。