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 相关文章推荐
让iframe子窗体取父窗体地址栏参数(querystring)
Oct 13 Javascript
再谈javascript图片预加载技术(详细演示)
Mar 12 Javascript
解决jquery submit()提交表单提示:f[s] is not a function
Jan 23 Javascript
jQuery拖拽插件gridster使用指南
Apr 21 Javascript
js实现复选框的全选和取消全选效果
Jan 03 Javascript
详谈js中数组(array)和对象(object)的区别
Feb 27 Javascript
基于JavaScript实现移动端无限加载分页
Mar 27 Javascript
JavaScript对象_动力节点Java学院整理
Jun 23 Javascript
vue单页面应用打开新窗口显示跳转页面的实例
Sep 21 Javascript
vue 巧用过渡效果(小结)
Sep 22 Javascript
Vue自定义组件的四种方式示例详解
Feb 28 Javascript
vue项目中使用多选框的实例代码
Jul 22 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第一季视频教程(李炎恢+php100 不断更新)
2011/05/29 PHP
PHP中全局变量global和$GLOBALS[]的区别分析
2012/08/06 PHP
php数组中包含中文的排序方法
2014/06/03 PHP
php查找字符串出现次数的方法
2014/12/01 PHP
PHP使用memcache缓存技术提高响应速度的方法
2014/12/26 PHP
如何修改yii2.0自带的user表为其它的表
2017/08/01 PHP
PHP连续签到功能实现方法详解
2019/12/04 PHP
jquery 实现两Select 标签项互调示例代码
2014/09/25 Javascript
Javascript模块化编程详解
2014/12/01 Javascript
node.js中的http.response.setHeader方法使用说明
2014/12/14 Javascript
使用javascript实现Iframe自适应高度
2014/12/24 Javascript
js检测用户输入密码强度
2015/10/22 Javascript
javascript断点调试心得分享
2016/04/23 Javascript
移动端js图片查看器
2016/11/17 Javascript
vue2.0 与 bootstrap datetimepicker的结合使用实例
2017/05/22 Javascript
基于Vue实现关键词实时搜索高亮显示关键词
2018/07/21 Javascript
微信小程序实现简单跑马灯效果
2020/05/26 Javascript
Vue3.x源码调试的实现方法
2019/10/13 Javascript
vue路由缓存的几种实现方式小结
2020/02/02 Javascript
在vue中使用回调函数,this调用无效的解决
2020/08/11 Javascript
微信小程序实现底部弹出模态框
2020/11/18 Javascript
[56:18]VGJ.S vs Secret 2018国际邀请赛小组赛BO2 第二场 8.16
2018/08/17 DOTA
python的xpath获取div标签内html内容,实现innerhtml功能的方法
2019/01/02 Python
Python利用PyExecJS库执行JS函数的案例分析
2019/12/18 Python
Python全面分析系统的时域特性和频率域特性
2020/02/26 Python
python Selenium 库的使用技巧
2020/10/16 Python
台湾百利市购物中心:e-Payless
2017/08/16 全球购物
DHC美国官网:日本通信销售第一的化妆品品牌
2017/11/12 全球购物
美国林业供应商:Forestry Suppliers
2019/05/01 全球购物
创业计划书中包含的9个方面
2013/12/26 职场文书
劳资专员岗位职责
2013/12/27 职场文书
医院门卫岗位职责
2013/12/30 职场文书
国培教师自我鉴定
2014/02/12 职场文书
律师催款函范文
2015/06/24 职场文书
大学社团活动总结怎么写
2019/06/21 职场文书
python 破解加密zip文件的密码
2021/04/22 Python