JQuery+JSON实例

准备工作：

首先，我们新建个网站（.net2.0就行）.

1.在我们的项目中jquery的js文件。

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

代码如下：（head区的js代码就是实现的全部代码，有详细注释）

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
<!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+“&nbsp; 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）

代码如下：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
<%@ WebHandler Language=“C#“ Class=“jsonData“%>
 
using System;
 
using System.Web;
 
publicclass jsonData : IHttpHandler {
 
publicvoid 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);
 
}
 
    publicbool IsReusable {
 
get{
 
returnfalse;
 
}
 
     }
 
}

对以上的内容我只说一点，那就是前台页面中的$.getJSON方法

$.getJSON(url, params, callback)

用一个HTTP GET请求一个JavaScript JSON数据

返回值：XMLHttpRequest

参数：

url (String): 装入页面的URL地址。

params (Map): （可选）发送到服务端的键／值对参数。

callback (Function): （可选） 当数据装入完成时执行的函数.

JSON官方网站提供的一个开源的JSON解析器和字符串转换器：json.js

string.parseJSON() 解析函数，它将JSON文本解析成object或者array，可以抛出一个语法错误的异常；

array.toJSONString()，

boolean.toJSONString() ，

date.toJSONString()，

number.toJSONString()，

object.toJSONString()，

string.toJSONString(): 这几个函数可以生成JSON文本

下面写一个简单的解析和转换的例子：

1
2
3
4
5
6
var str=‘["0","1"]‘;
var obj = str.parseJSON();
 
document.write(obj[0]);
 
document.write(obj[1]);

结果是01

1
2
3
4
5
6
var doc =new Array();
doc[0]=‘0‘;
 
doc[1]=‘1‘;
 
document.write(doc.toJSONString())

结果是[“0″,”1”]

Json.txt

1
2
3
4
5
6
7
{
 
“user”:”cck”,
 
“sex”:”name”
 
}