实战：当jquery遇上了json

最新推荐文章于 2018-11-29 16:32:45 发布

sven_xu

最新推荐文章于 2018-11-29 16:32:45 发布

阅读量869

点赞数

分类专栏： JQuery

本文链接：https://blog.csdn.net/sven_xu/article/details/46323549

版权

JQuery 专栏收录该内容

31 篇文章 0 订阅

订阅专栏

jquery :大家一定很熟悉，就算没用过，也应该听说过，不多做介绍，不知道的赶紧google一下。
json :一种数据格式，她小巧，轻盈。在javascript的世界中，完胜XML。
jquery和json都是因为小与巧而被广泛使用，今天把她们弄到一起，大家应该没意见吧。

废话了一把，现在言归正传，
通过这篇文章你可以得到以下收获：
1.jqury如何用ajax的形式调用后台asp.net页面生成的json数据
2.jquery简单的dom操作
3.送本jquery的开发手册给大家（大家慢慢去研究）

准备工作：
首先，我们新建个网站（.net2.0就行）.
1.在我们的项目中jquery的js文件。
2.新建一个htm文件，命名为dome.htm吧。
代码如下：（head区的js代码就是实现的全部代码，有详细注释）

Code

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<head>

<title>jquery获取json数据演示页面</title>

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 .name+"  Age:"+json.age+"</li>")
    })
    })
    }
    </script>
</head>
<body>
    <input id="Button1" type="button" value="获取数据" οnclick="getData()" />
   <ul id="list"></ul>
</body>
</html>

3.我们再建一个一般应用程序（jsonData.ashx）
代码如下：
Code
<%@ 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，后台调试的数据：

好啦，这篇文章就写到这。
附上jquery的开发手册：jqueryapi12.rar（这个手册本身就是基于jquery做的，，很漂亮）
文字显得有点啰嗦，应该没走题，请大家给个及格分啦，

原创文字只代表本人某一时间内的观点或结论,本人不对涉及到的任何代码担保。转载请标明出处！
支持我请点击上方广告,谢谢^0^ Tag标签: asp.net,Jquery,json

sven_xu

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
实战：当jquery遇上了json

jquery:大家一定很熟悉，就算没用过，也应该听说过，不多做介绍，不知道的赶紧google一下。json:一种数据格式，她小巧，轻盈。在javascript的世界中，完胜XML。jquery和json都是因为小与巧而被广泛使用，今天把她们弄到一起，大家应该没意见吧。废话了一把，现在言归正传，通过这篇文章你可以得到以下收获：1.jqury如何用ajax的形式调用后台asp.net页面生成的json
复制链接

扫一扫

专栏目录