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字符串的各种格式的转换 ToString,Format
Aug 08 Javascript
JS幻灯片可循环播放可平滑旋转带滚动导航(自写)
Aug 05 Javascript
查询json的数据结构的8种方式简介
Mar 10 Javascript
JQuery表格拖动调整列宽效果(自己动手写的)
Sep 01 Javascript
javascript中hasOwnProperty() 方法使用指南
Mar 09 Javascript
WordPress中利用AJAX技术进行评论提交的实现示例
Jan 12 Javascript
jQuery实现图片加载完成后改变图片大小的方法
Mar 29 Javascript
JavaScript职责链模式概述
Sep 17 Javascript
Bootstrap输入框组件使用详解
Jun 09 Javascript
利用JavaScript对中文(汉字)进行排序实例详解
Jun 18 Javascript
JavaScript中使用Async实现异步控制
Aug 15 Javascript
让bootstrap的carousel支持滑动滚屏的实现代码
Nov 27 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
天使彦史上最神还原,性别曝光的那一刻,百万网友恋爱了
2020/03/02 国漫
如何使用PHP中的字符串函数
2006/11/24 PHP
php构造函数的继承方法
2015/02/09 PHP
PHP使用gmdate实现将一个UNIX 时间格式化成GMT文本的方法
2015/03/19 PHP
WordPress中访客登陆实现邮件提醒的PHP脚本实例分享
2015/12/14 PHP
PHP支付宝当面付2.0代码
2018/12/21 PHP
Yii2处理密码加密及验证的方法
2019/05/12 PHP
jquery 得到当前页面高度和宽度的两个函数
2010/02/21 Javascript
javascript右下角弹层及自动隐藏(自己编写)
2013/11/20 Javascript
javascript实现锁定网页、密码解锁效果(类似系统屏幕保护效果)
2014/08/15 Javascript
利用原生JS自动生成文章标题树的实例
2016/08/22 Javascript
jquery表单提交带错误信息提示效果
2017/03/09 Javascript
微信小程序显示下拉列表功能【附源码下载】
2017/12/12 Javascript
vue使用localStorage保存登录信息 适用于移动端、PC端
2019/05/27 Javascript
JS中的const命令你真懂它吗
2020/03/08 Javascript
JavaScript中reduce()的5个基本用法示例
2020/07/19 Javascript
[02:15]2015国际邀请赛选手档案IG.Ferrari 430
2015/07/30 DOTA
[54:41]2018DOTA2亚洲邀请赛3月30日 小组赛B组 VGJ.T VS paiN
2018/03/31 DOTA
django框架自定义用户表操作示例
2018/08/07 Python
python 实现批量xls文件转csv文件的方法
2018/10/23 Python
python虚拟环境迁移方法
2019/01/03 Python
pytorch中tensor张量数据类型的转化方式
2019/12/31 Python
浅谈spring boot 集成 log4j 解决与logback冲突的问题
2020/02/20 Python
Python实现京东抢秒杀功能
2021/01/25 Python
Stylenanda中文站:韩国一线网络服装品牌
2016/12/22 全球购物
中国医药集团国药在线:国药网
2017/02/06 全球购物
初中同学会活动方案
2014/08/22 职场文书
护士年终工作总结不会写?各科护士模板总结
2020/01/02 职场文书
Canvas三种动态画圆实现方法说明(小结)
2021/04/16 Javascript
在CSS中映射鼠标位置并实现通过鼠标移动控制页面元素效果(实例代码)
2021/04/22 HTML / CSS
golang 实现两个结构体复制字段
2021/04/28 Golang
Django利用AJAX技术实现博文实时搜索
2021/05/06 Python
JavaScript继承的三种方法实例
2021/05/12 Javascript
Redis+Lua脚本实现计数器接口防刷功能(升级版)
2022/02/12 Redis
Apache Kafka 分区重分配的实现原理解析
2022/07/15 Servers
Pygame游戏开发之太空射击实战敌人精灵篇
2022/08/05 Python