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 相关文章推荐
js 小数取整的函数
May 10 Javascript
AeroWindow 基于JQuery的弹出窗口插件
Jun 27 Javascript
jQuery使用append在html元素后同时添加多项内容的方法
Mar 26 Javascript
js编写贪吃蛇的小游戏
Aug 24 Javascript
基于JavaScript代码实现微信扫一扫下载APP
Dec 30 Javascript
javascript时间差插件分享
Jul 18 Javascript
AngularJS中的DOM操作用法分析
Nov 04 Javascript
Node 升级到最新稳定版的方法分享
May 17 Javascript
原生js实现商品筛选功能
Oct 28 Javascript
JavaScript switch语句使用方法简介
Dec 30 Javascript
javascript实现图片轮换动作方法
Aug 07 Javascript
Java 生成随机字符的示例代码
Jan 13 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通过COM使用ADODB的简单例子
2006/12/31 PHP
浏览器无法运行JAVA脚本的解决方法
2008/01/09 Javascript
javascript css styleFloat和cssFloat
2010/03/15 Javascript
js光标定位文本框回车表单提交问题的解决方法
2015/05/11 Javascript
关于JSON.parse(),JSON.stringify(),jQuery.parseJSON()的用法
2016/06/30 Javascript
Jquery遍历select option和添加移除option的实现方法
2016/08/26 Javascript
详解ES6之用let声明变量以及let loop机制
2017/07/15 Javascript
详解利用jsx写vue组件的方法示例
2017/07/17 Javascript
JS点击图片弹出文件选择框并覆盖原图功能的实现代码
2017/08/25 Javascript
jQuery事件对象的属性和方法详解
2017/09/09 jQuery
vue如何进行动画的封装
2018/09/26 Javascript
使用post方法实现json往返传输数据的方法
2019/03/30 Javascript
关于element-ui的隐藏组件el-scrollbar的使用
2019/05/29 Javascript
python创建关联数组(字典)的方法
2015/05/04 Python
通过数据库向Django模型添加字段的示例
2015/07/21 Python
Linux(Redhat)安装python3.6虚拟环境(推荐)
2018/05/05 Python
python实现人民币大写转换
2018/06/20 Python
利用pandas进行大文件计数处理的方法
2018/07/25 Python
Django添加favicon.ico图标的示例代码
2018/08/07 Python
Python抽象和自定义类定义与用法示例
2018/08/23 Python
python程序快速缩进多行代码方法总结
2019/06/23 Python
Python实用工具FuckIt.py介绍
2019/07/02 Python
Pyorch之numpy与torch之间相互转换方式
2019/12/31 Python
CSS3制作炫酷的自定义发光文字
2016/03/28 HTML / CSS
大学生标准推荐信范文
2013/11/25 职场文书
大学生咖啡店创业计划书
2014/01/21 职场文书
CAD制图设计师自荐信
2014/01/29 职场文书
优秀信贷员先进事迹
2014/01/31 职场文书
2014年开学第一课活动方案
2014/03/06 职场文书
绿色环保标语
2014/06/12 职场文书
品牌转让协议书
2014/08/20 职场文书
科学发展观标语
2014/10/08 职场文书
2014年教育工作总结
2014/11/26 职场文书
2015年护理工作总结范文
2015/04/03 职场文书
优秀团员主要事迹范文
2015/11/05 职场文书
JavaScript嵌入百度地图API的最详细方法
2021/04/16 Javascript