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 相关文章推荐
用ADODB.Stream转换
Jan 22 Javascript
JS input文本框禁用右键和复制粘贴功能的代码
Apr 15 Javascript
jquery统计输入文字的个数并对其进行判断
Jan 07 Javascript
jquery判断元素的子元素是否存在的示例代码
Feb 04 Javascript
详解AngularJS中的作用域
Jun 17 Javascript
js中el表达式的使用和非空判断方法
Mar 28 Javascript
vue.js轮播图组件使用方法详解
Jul 03 Javascript
LayUI动态设置checkbox不显示的解决方法
Sep 02 Javascript
Javascript作用域和作用域链原理解析
Mar 03 Javascript
基于VUE实现判断设备是PC还是移动端
Jul 03 Javascript
JavaScript TAB栏切换效果的示例
Nov 05 Javascript
vue如何使用rem适配
Feb 06 Vue.js
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
索尼SONY ICF-SW7600GR电路分析与改良
2021/03/02 无线电
Yii中表单用法实例详解
2016/01/05 PHP
PHP创建word文档的方法(平台无关)
2016/03/29 PHP
Javascript的IE和Firefox兼容性汇编(zz)
2007/02/02 Javascript
jquery tools 系列 scrollable(2)
2009/09/06 Javascript
网易JS面试题与Javascript词法作用域说明
2010/11/09 Javascript
jQuery插件-jRating评分插件源码分析及使用方法
2012/12/28 Javascript
jquery右下角弹出提示框示例代码
2013/10/08 Javascript
深入理解jQuery中live与bind方法的区别
2013/12/18 Javascript
javascript数字时钟示例分享
2014/04/23 Javascript
javascript移动设备Web开发中对touch事件的封装实例
2014/06/05 Javascript
js和jquery中循环的退出和继续学习记录
2014/09/06 Javascript
jQuery页面元素动态添加后绑定事件丢失方法,非 live
2016/06/16 Javascript
JQuery动态添加Select的Option元素实现方法
2016/08/29 Javascript
jQuery+json实现动态创建复杂表格table的方法
2016/10/25 Javascript
移动前端图片压缩上传的实例
2017/12/06 Javascript
vue展示dicom文件医疗系统的实现代码
2018/08/27 Javascript
Python中的异常处理简明介绍
2015/04/13 Python
python实现读Excel写入.txt的方法
2018/04/29 Python
用Python实现数据的透视表的方法
2018/11/16 Python
PyQt4实时显示文本内容GUI的示例
2019/06/14 Python
python 3.74 运行import numpy as np 报错lib\site-packages\numpy\__init__.py
2019/10/06 Python
Python实现电视里的5毛特效实例代码详解
2020/05/15 Python
完美解决pycharm 不显示代码提示问题
2020/06/02 Python
CSS3的resize属性使用初探
2015/09/27 HTML / CSS
美国饼干礼物和美食甜点购买网站:Cheryl’s
2020/05/28 全球购物
网络通讯中,端口有什么含义,端口的取值范围
2012/11/23 面试题
单位办理社保介绍信
2014/01/10 职场文书
大四学生找工作的自荐信
2014/03/27 职场文书
临床护理求职信
2014/04/26 职场文书
中央空调节能方案
2014/06/15 职场文书
房屋租赁协议书
2014/10/18 职场文书
2015年六一儿童节活动方案
2015/05/05 职场文书
2015小学五年级班主任工作总结
2015/05/21 职场文书
自信主题班会
2015/08/14 职场文书
CSS3实现三角形不断放大效果
2021/04/13 HTML / CSS