JQUERY操作JSON实例代码

lin02144

lin02144

2016-02-19 14:13

给自己一点时间接受自己,爱自己,趁着下午茶的时间来学习图老师推荐的JQUERY操作JSON实例代码,过去的都会过去,迎接崭新的开始,释放更美好的自己。
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
titlejquery获取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("liname:"+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.运行结果

2,后台调试的数据:
展开更多 50%)
分享

猜你喜欢

JQUERY操作JSON实例代码

Web开发
JQUERY操作JSON实例代码

JQuery 常用操作代码

Web开发
JQuery 常用操作代码

s8lol主宰符文怎么配

英雄联盟 网络游戏
s8lol主宰符文怎么配

jquery 获取json数据实现代码

Web开发
jquery 获取json数据实现代码

Jquery cookie操作代码

Web开发
Jquery cookie操作代码

lol偷钱流符文搭配推荐

英雄联盟 网络游戏
lol偷钱流符文搭配推荐

JQuery 小练习(实例代码)

Web开发
JQuery 小练习(实例代码)

Jquery中增加参数与Json转换代码

Web开发
Jquery中增加参数与Json转换代码

lolAD刺客新符文搭配推荐

英雄联盟
lolAD刺客新符文搭配推荐

Ajax铺设了更好的开发Web应用道路

Ajax铺设了更好的开发Web应用道路

开发工具:Java规则引擎工作原理及应用

开发工具:Java规则引擎工作原理及应用
下拉加载更多内容 ↓