当前位置: 首页 > 图文教程 > 网络编程 > Javascript > JQUERY操作JSON实例代码

Javascript
web开发设计师比较费解的JavaScript
jQuery教程:整理的几个常见的初学者问题
免费资源:7个效果非常棒的jQuery 3D效果插件
JavaScript教程:编写匿名函数的几种方法
jQuery教程:jQuery的核心
jQuery教程:jQuery核心方法的使用
webjx收集45个jQuery导航插件和教程
30个气泡悬浮框(Tooltip)的jQuery插件
Jetpack扩展案例:Gmail邮件提醒功能
非常出色的jQuery运动特效可以和Flash媲美
ImagesLazyLoad 图片延迟加载效果
收集国外的14个图片放大编辑的jQuery插件
修改和创建DOM节点两种方式的4种优化方案
jQuery.Switchable整合插件用途介绍
提高Textarea操作性能优秀的jQuery插件
WEBJX收集12个非常有创意的JavaScript小游戏
Javascript教程:关于深入了解JS的几个问题

Javascript 中的 JQUERY操作JSON实例代码


出处:互联网   整理: 软晨网(RuanChen.com)   发布: 2010-02-27   浏览: 54 ::
收藏到网摘: n/a

通过这篇文章你可以得到以下收获JQUERY操作JSON的一些实现方法。 1.jqury如何用ajax的形式调用后台asp.net页面生成的json数据
2.jquery简单的dom操作
3.送本jquery的开发手册给大家(大家慢慢去研究)
准备工作:
首先,我们新建个网站(.net2.0就行).
1.在我们的项目中jquery的js文件。
2.新建一个htm文件,命名为dome.htm吧。
代码如下:(head区的js代码就是实现的全部代码,有详细注释)
复制代码 代码如下:

<!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-1.2.1.pack.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>

3.我们再建一个一般应用程序(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;
}
}
}

对以上的内容我只说一点,那就是前台页面中的$.getJSON方法
$.getJSON(url, params, callback)
用一个HTTP GET请求一个JavaScript JSON数据
返回值:XMLHttpRequest
参数:
url (String): 装入页面的URL地址。
params (Map): (可选)发送到服务端的键/值对参数。
callback (Function): (可选) 当数据装入完成时执行的函数.
下面贴一些运行成功的图:
1.运行结果

2,后台调试的数据: