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 相关文章推荐
javascript 树控件 比较好用
Jun 11 Javascript
js获取光标位置和设置文本框光标位置示例代码
Jan 09 Javascript
JS实现动态生成表格并提交表格数据向后端
Nov 25 Javascript
React如何将组件渲染到指定DOM节点详解
Sep 08 Javascript
解决vue数组中对象属性变化页面不渲染问题
Aug 09 Javascript
vue 列表页跳转详情页获取id以及详情页通过id获取数据
Mar 27 Javascript
node后端服务保活的实现
Nov 10 Javascript
微信小程序实现滑动翻页效果(完整代码)
Dec 06 Javascript
JS数组扁平化、去重、排序操作实例详解
Feb 24 Javascript
JS快速实现简单计算器
Apr 08 Javascript
关于IDEA中的.VUE文件报错 Export declarations are not supported by current JavaScript version
Oct 17 Javascript
vue中控制mock在开发环境使用,在生产环境禁用方式
Apr 06 Vue.js
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
ThinkPHP登录功能的实现方法
2014/08/20 PHP
PHP实现微信发红包程序
2015/08/24 PHP
PHP页面跳转操作实例分析(header方法)
2016/09/28 PHP
javascript[js]获取url参数的代码
2007/10/17 Javascript
javascrpt绑定事件之匿名函数无法解除绑定问题
2012/12/06 Javascript
JS小游戏之仙剑翻牌源码详解
2014/09/25 Javascript
js排序与重组的实例讲解
2017/08/28 Javascript
webpack 样式加载的实现原理
2018/06/12 Javascript
node(koa2) web应用模块介绍详解
2019/03/29 Javascript
electron 如何将任意资源打包的方法步骤
2020/04/16 Javascript
小程序实现多个选项卡切换
2020/06/19 Javascript
如何在 Vue 中使用 JSX
2021/02/14 Vue.js
python使用reportlab实现图片转换成pdf的方法
2015/05/22 Python
python3将视频流保存为本地视频文件
2018/06/20 Python
Python读取mat文件,并转为csv文件的实例
2018/07/04 Python
Python实现识别图片内容的方法分析
2018/07/11 Python
python环境路径配置以及命令行运行脚本
2019/04/02 Python
解决django后台样式丢失,css资源加载失败的问题
2019/06/11 Python
Python实现栈和队列的简单操作方法示例
2019/11/29 Python
opencv 图像滤波(均值,方框,高斯,中值)
2020/07/08 Python
解决Python3.7.0 SSL低版本导致Pip无法使用问题
2020/09/03 Python
详解css3使用transform出现字体模糊的解决办法
2020/10/16 HTML / CSS
canvas实现漂亮的下雨效果的示例
2018/04/18 HTML / CSS
请问软件开发中的设计模式你会使用哪些
2015/05/13 面试题
抗洪救灾先进集体事迹材料
2014/05/26 职场文书
求职教师自荐书
2014/06/19 职场文书
《中国梦我的梦》小学生演讲稿
2014/08/20 职场文书
乡镇党的群众路线教育实践活动领导班子对照检查材料
2014/09/25 职场文书
2014年民政工作总结
2014/11/26 职场文书
2014收银员工作总结范文
2014/12/16 职场文书
毕业实习单位意见
2015/06/04 职场文书
小学一年级班主任工作经验交流材料
2015/11/02 职场文书
合作意向书范本
2019/04/17 职场文书
教师实习自我鉴定总结
2019/08/20 职场文书
基于Python实现股票收益率分析
2022/04/02 Python
VUE使用draggable实现组件拖拽
2022/04/06 Vue.js