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 相关文章推荐
JS getMonth()日期函数的值域是0-11
Feb 15 Javascript
基于jquery实现控制经纬度显示地图与卫星
May 20 Javascript
JS调试必备的5个debug技巧
Mar 07 Javascript
jquery实现动态画圆
Dec 04 Javascript
JavaScript弹出新窗口并控制窗口移动到指定位置的方法
Apr 06 Javascript
javascript表格隔行变色加鼠标移入移出及点击效果的方法
Apr 10 Javascript
JS+CSS实现的简单折叠展开多级菜单效果
Sep 12 Javascript
JavaScript编码风格指南(中文版)
Aug 26 Javascript
zTree树形插件异步加载方法详解
Jun 14 Javascript
使用JS实现气泡跟随鼠标移动的动画效果
Sep 16 Javascript
JavaScript函数apply()和call()用法与异同分析
Aug 10 Javascript
Node.js设置定时任务之node-schedule模块的使用详解
Apr 28 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&amp;java(一)
2006/10/09 PHP
php笔记之:php函数range() round()和list()的使用说明
2013/04/26 PHP
解析PHP中的内存管理,PHP动态分配和释放内存
2013/06/28 PHP
yii使用activeFileField控件实现上传文件与图片的方法
2015/12/28 PHP
WordPress中重置文章循环的rewind_posts()函数讲解
2016/01/11 PHP
Laravel 5.5 的自定义验证对象/类示例代码详解
2017/08/29 PHP
PHP+redis实现微博的推模型案例分析
2019/07/10 PHP
Javascript 获取滚动条位置等信息的函数
2009/09/08 Javascript
Javascript 判断客户端浏览器类型代码
2010/03/01 Javascript
Bookmarklet实现启动jQuery(模仿 云输入法)
2010/09/15 Javascript
jcarousellite.js 基于Jquery的图片无缝滚动插件
2010/12/30 Javascript
鼠标悬浮停留三秒后自动显示大图js代码
2014/09/09 Javascript
开源的javascript项目Kissy介绍
2014/11/28 Javascript
JS组件Bootstrap按钮组与下拉按钮详解
2016/05/10 Javascript
跨域请求的完美解决方法(JSONP, CORS)
2016/06/12 Javascript
类似于QQ的右滑删除效果的实现方法
2016/10/16 Javascript
微信小程序 input输入框控件详解及实例(多种示例)
2016/12/14 Javascript
jQuery插件HighCharts绘制2D带Label的折线图效果示例【附demo源码下载】
2017/03/08 Javascript
JS鼠标3次点击事件实现代码及扩展思路
2017/09/12 Javascript
JS中Map和ForEach的区别
2018/02/05 Javascript
mpvue 单文件页面配置详解
2018/12/02 Javascript
Web安全之XSS攻击与防御小结
2018/12/13 Javascript
微信小程序错误this.setData报错及解决过程
2019/09/18 Javascript
Vue 实现分页与输入框关键字筛选功能
2020/01/02 Javascript
[45:44]完美世界DOTA2联赛PWL S2 FTD vs PXG 第一场 11.27
2020/12/01 DOTA
python3实现绘制二维点图
2019/12/04 Python
jupyter 导入csv文件方式
2020/04/21 Python
用python实现前向分词最大匹配算法的示例代码
2020/08/06 Python
Python爬虫之Selenium实现关闭浏览器
2020/12/04 Python
Sneaker Studio法国:购买运动鞋
2018/06/08 全球购物
机械电子工程毕业生自荐信
2013/11/23 职场文书
读书活动实施方案
2014/03/10 职场文书
中药学专业毕业生推荐信
2014/07/10 职场文书
汤姆叔叔的小屋读书笔记
2015/06/30 职场文书
通过Python把学姐照片做成拼图游戏
2022/02/15 Python
未发现nvidia显卡怎么办?Win11系统中未检测到nvidia显卡解决教程
2022/04/08 数码科技