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 相关文章推荐
JavaScript 页面编码与浏览器类型判断代码
Jun 03 Javascript
js中将字符串转换成json的三种方式
Jan 12 Javascript
js中opener与parent的区别详细解析
Jan 14 Javascript
使用JQuery库提供的扩展功能实现自定义方法
Sep 09 Javascript
jQuery中odd选择器的定义和用法
Dec 23 Javascript
Google 地图获取API Key详细教程
Aug 06 Javascript
JS获取本周周一,周末及获取任意时间的周一周末功能示例
Feb 09 Javascript
使用vue-cli(vue脚手架)快速搭建项目的方法
May 21 Javascript
layui 上传文件_批量导入数据UI的方法
Sep 23 Javascript
vue实现在线翻译功能
Sep 27 Javascript
js实现内置计时器
Dec 16 Javascript
vue a标签点击实现赋值方式
Sep 07 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_filter()函数过滤空数组的实现代码
2014/08/19 PHP
PHP中使用localhost连接Mysql不成功的解决方法
2014/08/20 PHP
php计算函数执行时间的方法
2015/03/20 PHP
php文件缓存类用法实例分析
2015/04/22 PHP
PHP实现PDO操作mysql存储过程示例
2019/02/13 PHP
javascript事件模型代码
2007/07/01 Javascript
图片动画横条广告带上下滚动的JS代码
2013/10/25 Javascript
JavaScript实现维吉尼亚(Vigenere)密码算法实例
2013/11/22 Javascript
js给selected添加options的方法
2015/05/06 Javascript
Jquery uploadify上传插件使用详解
2016/01/13 Javascript
AngularJS表格添加序号的方法
2017/03/03 Javascript
JS实现直接运行html代码的方法
2017/03/13 Javascript
关于vue-router路径计算问题
2017/05/10 Javascript
详解React项目的服务端渲染改造(koa2+webpack3.11)
2018/03/19 Javascript
layer.open关闭父窗口 以及调用父页面的方法
2018/08/17 Javascript
原生JS+HTML5实现的可调节写字板功能示例
2018/08/30 Javascript
微信小程序+腾讯地图开发实现路径规划绘制
2019/05/22 Javascript
JavaScript实现单英文金山打字通
2020/07/24 Javascript
微信小程序request请求封装,验签代码实例
2019/12/04 Javascript
javascript设计模式 ? 桥接模式原理与应用实例分析
2020/04/13 Javascript
[07:01]DOTA2-DPC中国联赛正赛 Aster vs Magma 3月5日 赛后选手采访
2021/03/11 DOTA
Python爬虫框架Scrapy安装使用步骤
2014/04/01 Python
Python计时相关操作详解【time,datetime】
2017/05/26 Python
python+pillow绘制矩阵盖尔圆简单实例
2018/01/16 Python
纯css3实现宠物小鸡实例代码
2018/10/08 HTML / CSS
html5应用缓存_动力节点Java学院整理
2017/07/13 HTML / CSS
Canvas多边形绘制的实现方法
2019/08/05 HTML / CSS
西班牙家用电器和电子产品购物网站:Mi Electro
2019/02/25 全球购物
一些高难度的SQL面试题
2016/11/29 面试题
水产养殖学应届生求职信
2013/09/29 职场文书
党员违纪检讨书
2014/02/18 职场文书
函授生自我鉴定
2014/03/25 职场文书
员工生日会策划方案
2014/06/14 职场文书
建设工程授权委托书
2014/09/22 职场文书
2016应届毕业生实习评语
2015/12/01 职场文书
Python中的变量与常量
2021/11/11 Python