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获取input表单值的代码
Apr 19 Javascript
JQUERY1.6 使用方法四 检测浏览器
Nov 23 Javascript
20条学习javascript的编程规范的建议
Nov 28 Javascript
node.js中的url.parse方法使用说明
Dec 10 Javascript
js实现点击链接后窗口缩小并居中的方法
Mar 02 Javascript
JS 实现可停顿的垂直滚动实例代码
Nov 23 Javascript
JavaScript实现图片本地预览功能【不用上传至服务器】
Sep 20 Javascript
vuejs使用$emit和$on进行组件之间的传值的示例
Oct 04 Javascript
小程序rich-text组件如何改变内部img图片样式的方法
May 22 Javascript
vue实现鼠标经过动画
Oct 16 Javascript
VSCode launch.json配置详细教程
Jun 18 Javascript
如何封装Vue Element的table表格组件
Feb 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
php将图片保存入mysql数据库失败的解决方法
2014/12/27 PHP
PHP基于单例模式实现的mysql类
2016/01/09 PHP
php mongodb操作类 带几个简单的例子
2016/08/25 PHP
php 多文件上传的实现实例
2016/10/23 PHP
详谈php中 strtr 和 str_replace 的效率问题
2017/05/14 PHP
Laravel基础_关于view共享数据的示例讲解
2019/10/14 PHP
thinkphp中常用的系统常量和系统变量
2014/03/05 Javascript
纯Javascript实现ping功能的方法
2015/03/20 Javascript
jQuery实现自定义右键菜单的树状菜单效果
2015/09/02 Javascript
用nodejs的实现原理和搭建服务器(动态)
2016/08/10 NodeJs
jQuery.datatables.js插件用法及api实例详解
2016/10/28 Javascript
JavaScript数据结构之栈实例用法
2019/01/18 Javascript
世界上最短的数字判断js代码
2019/09/09 Javascript
解决layui的table插件无法多层级获取json数据的问题
2019/09/19 Javascript
Node.js API详解之 util模块用法实例分析
2020/05/09 Javascript
ES6使用新特性Proxy实现的数据绑定功能实例
2020/05/11 Javascript
Nest.js散列与加密实例详解
2021/02/24 Javascript
Python中多线程thread与threading的实现方法
2014/08/18 Python
详解Python编程中包的概念与管理
2015/10/16 Python
Python列表推导式与生成器表达式用法示例
2018/02/08 Python
详解利用django中间件django.middleware.csrf.CsrfViewMiddleware防止csrf攻击
2018/10/09 Python
Python中的几种矩阵乘法(小结)
2019/07/10 Python
Python实现企业微信机器人每天定时发消息实例
2020/02/25 Python
Python图像处理二值化方法实例汇总
2020/07/24 Python
实例讲解使用HTML5 Canvas绘制阴影效果的方法
2016/03/25 HTML / CSS
法国创作个性化T恤衫和其他定制产品平台:Tostadora
2018/04/08 全球购物
Molly Bracken法国电子商店:法国女性时尚品牌
2019/07/24 全球购物
印度尼西亚手表和包包商店:Urban Icon
2019/12/12 全球购物
季度思想汇报
2014/01/01 职场文书
电工工作职责范本
2014/02/22 职场文书
个性婚礼策划方案
2014/05/17 职场文书
大学生个人总结范文
2015/02/15 职场文书
学雷锋感言
2015/08/03 职场文书
Windows下使用Nginx+Tomcat做负载均衡的完整步骤
2021/03/31 Servers
判断Python中的Nonetype类型
2021/05/25 Python
浅谈JS的原型和原型链
2021/06/04 Javascript