jQuery AJAX —篇四 $.getJSON()

来源：互联网发布：python调用shell脚本编辑：程序博客网时间：2024/06/05 04:48

　　回顾

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

　　未完结

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

6 1