您的位置：首页 > Web前端 > JQuery

jquery处理json数据

2011-06-27 22:29 344 查看

处理步骤：

1.在项目中添加jquery的js文件（jquery-1.2.1.pack.js）。

2.新建一个htm文件，命名为example.htm。

<!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): （可选）当数据装入完成时执行的函数.

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航