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 相关文章推荐
终于解决了IE8不支持数组的indexOf方法
Apr 03 Javascript
js触发onchange事件的方法说明
Mar 08 Javascript
js style动态设置table高度
Oct 21 Javascript
javascript中this指向详解
Apr 23 Javascript
终于实现了!精彩的jquery弹幕效果
Jul 18 Javascript
轻松掌握JavaScript单例模式
Aug 25 Javascript
基于原生js淡入淡出函数封装(兼容IE)
Oct 20 Javascript
js使用i18n实现页面国际化的方法
May 09 Javascript
几个你不知道的技巧助你写出更优雅的vue.js代码
Jun 11 Javascript
vue中使用echarts制作圆环图的实例代码
Jul 27 Javascript
了解重排与重绘
May 29 Javascript
解决vue elementUI中table里数字、字母、中文混合排序问题
Jan 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 Session变量不能传送到下一页的解决方法
2009/11/27 PHP
php中session_unset与session_destroy的区别分析
2011/06/16 PHP
通过缓存数据库结果提高PHP性能的原理介绍
2012/09/05 PHP
服务器变量 $_SERVER 的深入解析
2013/07/02 PHP
php实例分享之通过递归实现删除目录下的所有文件详解
2014/05/15 PHP
Centos6.5和Centos7 php环境搭建方法
2016/05/27 PHP
在laravel中实现将查询的对象转换为多维数组的函数
2019/10/21 PHP
学习ExtJS form布局
2009/10/08 Javascript
原生js制作简单的数字键盘
2015/04/24 Javascript
JavaScript按值删除数组元素的方法
2015/04/24 Javascript
面向切面编程(AOP)的理解
2015/05/01 Javascript
jQuery使用each方法与for语句遍历数组示例
2016/06/16 Javascript
vue多级多选菜单组件开发
2020/09/08 Javascript
BootstrapValidator超详细教程(推荐)
2016/12/07 Javascript
高效的jQuery代码编写技巧总结
2017/02/22 Javascript
underscore之Collections_动力节点Java学院整理
2017/07/10 Javascript
JS常用的几种数组遍历方式以及性能分析对比实例详解
2018/04/11 Javascript
基于React Native 0.52实现轮播图效果
2020/08/25 Javascript
Vue加载json文件的方法简单示例
2019/01/28 Javascript
react MPA 多页配置详解
2019/10/18 Javascript
微信小程序实现星级评价
2019/11/20 Javascript
Node.js控制台彩色输出的方法与原理实例详解
2019/12/01 Javascript
JS图片懒加载的优点及实现原理
2020/01/10 Javascript
vue实现公共方法抽离
2020/07/31 Javascript
python自带的http模块详解
2016/11/06 Python
CentOS下使用yum安装python-pip失败的完美解决方法
2017/08/16 Python
Python爬虫抓取代理IP并检验可用性的实例
2018/05/07 Python
Python使用pandas处理CSV文件的实例讲解
2018/06/22 Python
python在回调函数中获取返回值的方法
2019/02/22 Python
python中threading开启关闭线程操作
2020/05/02 Python
canvas实现漂亮的下雨效果的示例
2018/04/18 HTML / CSS
初三家长会邀请函
2014/01/18 职场文书
2014年公司迎新年活动方案
2014/02/24 职场文书
工程建设实施方案
2014/03/14 职场文书
python基础之停用词过滤详解
2021/04/21 Python
Flask使用SQLAlchemy实现持久化数据
2021/07/16 Python