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 EasyUI 对话框的使用方法
Oct 24 Javascript
jQuery语法总结和注意事项小结
Nov 11 Javascript
javascript对话框使用方法(警告框 javascript确认框 提示框)
Jan 07 Javascript
node.js中的fs.ftruncate方法使用说明
Dec 15 Javascript
最全面的百度地图JavaScript离线版开发
Sep 10 Javascript
js选项卡的制作方法
Jan 23 Javascript
vuex学习之Actions的用法详解
Aug 29 Javascript
form表单数据封装成json格式并提交给服务器的实现方法
Dec 14 Javascript
6行代码实现微信小程序页面返回顶部效果
Dec 28 Javascript
JavaScript中reduce()的5个基本用法示例
Jul 19 Javascript
解决vue中axios设置超时(超过5分钟)没反应的问题
Sep 04 Javascript
详解如何使用Node.js实现热重载页面
May 06 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
模拟xcopy的函数
2006/10/09 PHP
php 获取select下拉列表框的值
2010/05/08 PHP
php中return的用法实例分析
2015/02/28 PHP
jquery 将disabled的元素置为enabled的三种方法
2009/07/25 Javascript
javaScript中with函数用法实例分析
2015/06/08 Javascript
jQuery实现连续动画效果实例分析
2015/10/09 Javascript
Node.js的MongoDB驱动Mongoose基本使用教程
2016/03/01 Javascript
使用ionic在首页新闻中应用到的跑马灯效果的实现方法
2017/02/13 Javascript
Node.js发送HTTP客户端请求并显示响应结果的方法示例
2017/04/12 Javascript
详解vue2.0的Element UI的表格table列时间戳格式化
2017/06/13 Javascript
vue实现的上传图片到数据库并显示到页面功能示例
2018/03/17 Javascript
微信小程序实现多选删除列表数据功能示例
2019/01/15 Javascript
jquery多级树形下拉菜单的实例代码
2019/07/09 jQuery
使用React代码动态生成栅格布局的方法
2020/05/24 Javascript
如何在vue 中使用柱状图 并自修改配置
2021/01/21 Vue.js
[00:44]2016完美“圣”典 风云人物:Mikasa宣传片
2016/12/07 DOTA
[05:23]DOTA2-DPC中国联赛2月1日Recap集锦
2021/03/11 DOTA
Python greenlet实现原理和使用示例
2014/09/24 Python
在Python中用has_key()方法查找键是否存在的教程
2015/05/21 Python
Python验证码识别处理实例
2015/12/28 Python
给你一面国旗 教你用python画中国国旗
2019/09/24 Python
matplotlib 生成的图像中无法显示中文字符的解决方法
2020/06/10 Python
浅谈Python xlwings 读取Excel文件的正确姿势
2021/02/26 Python
遮罩层 + Iframe实现界面自动显示的示例代码
2020/04/26 HTML / CSS
英国假发网站:Hothair
2018/02/23 全球购物
上海天奕面试题笔试题
2015/04/19 面试题
自我反省检讨书
2014/01/23 职场文书
安全协议书范本
2014/04/21 职场文书
社会工作专业自荐信
2014/09/26 职场文书
2014年保险公司工作总结
2014/11/22 职场文书
新教师个人总结
2015/02/06 职场文书
2015年健康教育工作总结
2015/04/10 职场文书
2015年女职工工作总结
2015/05/15 职场文书
同事欢送会致辞
2015/07/31 职场文书
python文件与路径操作神器 pathlib
2022/04/01 Python
Python调用腾讯API实现人脸身份证比对功能
2022/04/04 Python