JQUERY操作JSON实例代码


Posted in Javascript onFebruary 09, 2010

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.运行结果
JQUERY操作JSON实例代码
2,后台调试的数据:
JQUERY操作JSON实例代码
Javascript 相关文章推荐
跨浏览器开发经验总结(四) 怎么写入剪贴板
May 13 Javascript
javascript学习笔记(七)利用javascript来创建和存储cookie
Apr 08 Javascript
前台js改变Session的值(用ajax实现)
Dec 28 Javascript
jQuery插件开发详细教程
Jun 06 Javascript
jQuery子属性过滤选择器用法分析
Feb 10 Javascript
动态加载js的方法汇总
Feb 13 Javascript
jQuery事件绑定on()、bind()与delegate() 方法详解
Jun 03 Javascript
浅谈bootstrap源码分析之tab(选项卡)
Jun 06 Javascript
如何解决手机浏览器页面点击不跳转浏览器双击放大网页
Jul 01 Javascript
Vue和Bootstrap的整合思路详解
Jun 30 Javascript
js定时器实现倒计时效果
Nov 05 Javascript
react-router browserHistory刷新页面404问题解决方法
Dec 29 Javascript
JQuery 获得绝对,相对位置的坐标方法
Feb 09 #Javascript
ExtJs 3.1 XmlTreeLoader Example Error
Feb 09 #Javascript
Javascript 获取链接(url)参数的方法[正则与截取字符串]
Feb 09 #Javascript
一个XML格式数据转换为图表的例子
Feb 09 #Javascript
javascript 解析url的search方法
Feb 09 #Javascript
toString()一个会自动调用的方法
Feb 08 #Javascript
jQuery AJAX回调函数this指向问题
Feb 08 #Javascript
You might like
PHP array_push 数组函数
2009/12/26 PHP
PHP中func_get_args(),func_get_arg(),func_num_args()的区别
2013/09/30 PHP
PHP独立Session数据库存储操作类分享
2014/06/11 PHP
PHP框架Swoole定时器Timer特性分析
2014/08/19 PHP
php实现留言板功能(会话控制)
2017/05/23 PHP
jQuery移动和复制dom节点实用DOM操作案例
2012/12/17 Javascript
JQuery实现的购物车功能(可以减少或者添加商品并自动计算价格)
2015/01/13 Javascript
JS判断当前页面是否在微信浏览器打开的方法
2015/12/08 Javascript
javascript每日必学之条件分支
2016/02/17 Javascript
js注入 黑客之路必备!
2016/09/14 Javascript
jQuery中值得注意的trigger方法浅析
2016/12/12 Javascript
JavaScript 详解预编译原理
2017/01/22 Javascript
jQuery实现一个简单的轮播图
2017/02/19 Javascript
Bootstrap Scrollspy源码学习
2017/03/02 Javascript
Angular2 父子组件数据通信实例
2017/06/22 Javascript
bootstrap Table插件使用demo
2017/08/07 Javascript
Node层模拟实现multipart表单的文件上传示例
2018/01/02 Javascript
一个因@click.stop引发的bug的解决
2019/01/08 Javascript
基于js实现逐步显示文字输出代码实例
2020/04/02 Javascript
js对象属性名驼峰式转下划线的实例代码
2020/09/17 Javascript
解决Element中el-date-picker组件不回填的情况
2020/11/07 Javascript
[02:20]DOTA2亚洲邀请赛 IG战队出场宣传片
2015/02/07 DOTA
python-opencv在有噪音的情况下提取图像的轮廓实例
2017/08/30 Python
Python3使用正则表达式爬取内涵段子示例
2018/04/22 Python
python如何创建TCP服务端和客户端
2018/08/26 Python
PyCharm代码回滚,恢复历史版本的解决方法
2018/10/22 Python
在pandas多重索引multiIndex中选定指定索引的行方法
2018/11/16 Python
python中强大的format函数实例详解
2018/12/05 Python
Python字符串匹配之6种方法的使用详解
2019/04/08 Python
Python中asyncio模块的深入讲解
2019/06/10 Python
幼儿园大班新学期寄语
2014/01/18 职场文书
销售助理岗位职责
2015/02/11 职场文书
综合素质评价个性与发展自我评价
2015/03/06 职场文书
海底两万里读书笔记
2015/06/26 职场文书
2016年党员干部公开承诺书
2016/03/24 职场文书
WinServer2012搭建DNS服务器的方法步骤
2022/06/10 Servers