JQUERY操作JSON例子

jquery:大家一定很熟悉,就算没用过,也应该听说过,不多做介绍,不知道的赶紧google一下。
json:一种数据格式,她小巧,轻盈。在javascript的世界中,完胜XML。
jquery和json都是因为小与巧而被广泛使用,今天把她们弄到一起,大家应该没意见吧。《JQUERY操作JSON例子》

废话了一把,现在言归正传,
通过这篇文章你可以得到以下收获:
1.jqury如何用ajax的形式调用后台asp.net页面生成的json数据
2.jquery简单的dom操作
3.送本jquery的开发手册给大家(大家慢慢去研究)

准备工作:
首先,我们新建个网站(.net2.0就行).
1.在我们的项目中jquery的js文件。
2.新建一个htm文件,命名为dome.htm吧。
代码如下:(head区的js代码就是实现的全部代码,有详细注释)

《JQUERY操作JSON例子》《JQUERY操作JSON例子》
《JQUERY操作JSON例子》<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>
《JQUERY操作JSON例子》
《JQUERY操作JSON例子》
<html xmlns=”http://www.w3.org/1999/xhtml”>
《JQUERY操作JSON例子》
<head>
《JQUERY操作JSON例子》
<title>jquery获取json数据演示页面</title>
《JQUERY操作JSON例子》
<script type=”text/javascript” src=”js/jquery-1.2.1.pack.js”></script>
《JQUERY操作JSON例子》《JQUERY操作JSON例子》
<script type=”text/javascript”>
《JQUERY操作JSON例子》《JQUERY操作JSON例子》
function getData(){
《JQUERY操作JSON例子》 $(
#list).html(“”);//清空列表中的数据
《JQUERY操作JSON例子》
//发送ajax请求
《JQUERY操作JSON例子》
$.getJSON(
《JQUERY操作JSON例子》
jsondata.ashx,//产生JSON数据的服务端页面
《JQUERY操作JSON例子》《JQUERY操作JSON例子》
{name:test,age:20},//向服务器发出的查询字符串(此参数可选)
《JQUERY操作JSON例子》
//对返回的JSON数据进行处理,本例以列表的形式呈现
《JQUERY操作JSON例子》《JQUERY操作JSON例子》
function(json){
《JQUERY操作JSON例子》
//循环取json中的数据,并呈现在列表中
《JQUERY操作JSON例子》《JQUERY操作JSON例子》
$.each(json,function(i){
《JQUERY操作JSON例子》 $(
#list).append(<li>name:+json[i].name+&nbsp; Age:+json[i].age+</li>)
《JQUERY操作JSON例子》 }
)
《JQUERY操作JSON例子》 }
)
《JQUERY操作JSON例子》 }

《JQUERY操作JSON例子》
</script>
《JQUERY操作JSON例子》
</head>
《JQUERY操作JSON例子》
<body>
《JQUERY操作JSON例子》
<input id=”Button1″ type=”button” value=”获取数据” onclick=”getData()” />
《JQUERY操作JSON例子》
<ul id=”list”></ul>
《JQUERY操作JSON例子》
</body>
《JQUERY操作JSON例子》
</html>

3.我们再建一个一般应用程序(jsonData.ashx)
代码如下:

《JQUERY操作JSON例子》《JQUERY操作JSON例子》
《JQUERY操作JSON例子》<%@ WebHandler Language=C# Class=jsonData %>
《JQUERY操作JSON例子》
《JQUERY操作JSON例子》
using System;
《JQUERY操作JSON例子》
using System.Web;
《JQUERY操作JSON例子》
《JQUERY操作JSON例子》《JQUERY操作JSON例子》
public class jsonData : IHttpHandler {
《JQUERY操作JSON例子》
《JQUERY操作JSON例子》《JQUERY操作JSON例子》
public void ProcessRequest (HttpContext context) {
《JQUERY操作JSON例子》 context.Response.ContentType
= text/plain;
《JQUERY操作JSON例子》
string data = [{name:\ants\,age:24},{name:\lele\,age:23}];//构建的json数据
《JQUERY操作JSON例子》
//下面两句是用来测试前台向此页面发出的查询字符
《JQUERY操作JSON例子》
string querystrname = context.Request.QueryString.GetValues(name)[0];//取查询字符串中namer的值
《JQUERY操作JSON例子》
string querystage = context.Request.QueryString.GetValues(age)[0];//取查询字符串中age的值
《JQUERY操作JSON例子》

《JQUERY操作JSON例子》 context.Response.Write(data);
《JQUERY操作JSON例子》 }

《JQUERY操作JSON例子》
《JQUERY操作JSON例子》《JQUERY操作JSON例子》
public bool IsReusable {
《JQUERY操作JSON例子》《JQUERY操作JSON例子》
get {
《JQUERY操作JSON例子》
return false;
《JQUERY操作JSON例子》 }

《JQUERY操作JSON例子》 }

《JQUERY操作JSON例子》
《JQUERY操作JSON例子》}

对以上的内容我只说一点,那就是前台页面中的$.getJSON方法

$.getJSON(url, params, callback)
用一个HTTP GET请求一个JavaScript JSON数据
返回值:XMLHttpRequest
参数:
url (String): 装入页面的URL地址。
params (Map): (可选)发送到服务端的键/值对参数。
callback (Function): (可选) 当数据装入完成时执行的函数.

下面贴一些运行成功的图:
1.运行结果
《JQUERY操作JSON例子》
2,后台调试的数据:
《JQUERY操作JSON例子》

好啦,这篇文章就写到这。
附上jquery的开发手册:jqueryapi12.rar(这个手册本身就是基于jquery做的,,很漂亮)
文字显得有点啰嗦,应该没走题,请大家给个及格分啦,《JQUERY操作JSON例子》



发表评论

您的电子邮箱地址不会被公开。

63 − = 56