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 相关文章推荐
通过jquery的$.getJSON做一个跨域ajax请求试验
May 03 Javascript
JavaScript 判断日期格式是否正确的实现代码
Jul 04 Javascript
JQuery扩展插件Validate 3通过参数设置错误信息
Sep 05 Javascript
JavaScript高级程序设计 读书笔记之九 本地对象Array
Feb 27 Javascript
js实现div的切换特效上一个下一个
Feb 11 Javascript
jquery左边浮动到一定位置时显示返回顶部按钮
Jun 05 Javascript
javascript编程开发中取色器及封装$函数用法示例
Aug 09 Javascript
vue中v-cloak解决刷新或者加载出现闪烁问题(显示变量)
Apr 20 Javascript
vue-cli 脚手架基于Nightwatch的端到端测试环境的过程
Sep 30 Javascript
详解小程序开发经验:多页面数据同步
May 18 Javascript
在layui中使用form表单监听ajax异步验证注册的实例
Sep 03 Javascript
详解用js代码触发dom事件的实现方案
Jun 10 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
仿AS3实现PHP 事件机制实现代码
2011/01/27 PHP
自己在做项目过程中学到的PHP知识收集
2012/08/20 PHP
php获取随机数组列表的方法
2014/11/13 PHP
Yii框架getter与setter方法功能与用法分析
2019/10/22 PHP
js 获取坐标 通过JS得到当前焦点(鼠标)的坐标属性
2013/01/04 Javascript
JQuery 获取json数据$.getJSON方法的实例代码
2013/08/02 Javascript
javascript中setTimeout使用指南
2015/07/26 Javascript
JavaScript+html5 canvas绘制的圆弧荡秋千效果完整实例
2016/01/26 Javascript
JavaScript实现字符串与日期的互相转换及日期的格式化
2016/03/07 Javascript
jQuery 监控键盘一段时间没输入
2016/04/22 Javascript
AngularJs+Bootstrap实现漂亮的计算器
2017/08/10 Javascript
简单谈谈CommonsChunkPlugin抽取公共模块
2017/12/31 Javascript
实例解析ES6 Proxy使用场景介绍
2018/01/08 Javascript
JS实现仿微信支付弹窗功能
2018/06/25 Javascript
Angular resolve基础用法详解
2018/10/03 Javascript
谈谈JavaScript中super(props)的重要性
2019/02/12 Javascript
vue webpack重写cookie路径的方法
2019/07/10 Javascript
微信小程序跳转到其他网页(外部链接)的实现方法
2019/09/20 Javascript
Python调用adb命令实现对多台设备同时进行reboot的方法
2018/10/15 Python
Python with用法:自动关闭文件进程
2019/07/10 Python
python tkinter实现连连看游戏
2020/11/16 Python
CSS3 :not()选择器实现最后一行li去除某种css样式
2016/10/19 HTML / CSS
HTML5 localStorage使用总结
2017/02/22 HTML / CSS
美国领先的户外服装与装备用品店:Moosejaw
2016/08/25 全球购物
美国第一香水网站:Perfume.com
2017/01/23 全球购物
凯特王妃父母建立的派对用品网站:Party Pieces
2017/05/28 全球购物
文员个人求职自荐信
2013/09/21 职场文书
公司成本主管岗位责任制
2014/02/21 职场文书
学习两会精神心得范文
2014/03/17 职场文书
小学校园文化建设汇报材料
2014/08/19 职场文书
2014年电话销售工作总结
2014/12/01 职场文书
家长会后的感想
2015/08/11 职场文书
优秀学生干部主要事迹材料
2015/11/04 职场文书
2016暑期社会实践心得体会范文
2016/01/14 职场文书
css filter和getUserMedia的联合使用
2022/02/24 HTML / CSS
python中Pyqt5使用Qlabel标签播放视频
2022/04/22 Python