惯性聚合 高效追踪和阅读你感兴趣的博客、新闻、科技资讯
阅读原文 在惯性聚合中打开

推荐订阅源

J
Java Code Geeks
F
Fortinet All Blogs
Martin Fowler
Martin Fowler
M
MIT News - Artificial intelligence
G
Google Developers Blog
P
Proofpoint News Feed
Recent Announcements
Recent Announcements
MyScale Blog
MyScale Blog
D
DataBreaches.Net
Stack Overflow Blog
Stack Overflow Blog
月光博客
月光博客
爱范儿
爱范儿
罗磊的独立博客
腾讯CDC
Hugging Face - Blog
Hugging Face - Blog
博客园 - 叶小钗
Vercel News
Vercel News
酷 壳 – CoolShell
酷 壳 – CoolShell
B
Blog
C
Check Point Blog
美团技术团队
宝玉的分享
宝玉的分享
Microsoft Security Blog
Microsoft Security Blog
OSCHINA 社区最新新闻
OSCHINA 社区最新新闻

博客园 - 踏踏实实干

asp.net MVC4 框架揭秘 读书笔记系列3 asp.net MVC4 框架揭秘 读书笔记系列2 asp.net MVC4 框架揭秘 读书笔记系列1 什么?你还不会写JQuery 插件 jQuery命名空间,插件开发 微信开发资源 jstree 从简单说起Jquery 插件应用说明 sync framework参考收集系列 收集一些.net 组件开发资源 (转) c# 调用SQL Server存储过程返回值(转) C#事务 访问数据库(转) 多库查询 sp_addlinkedserver使用方法(添加链接服务器)(转)片段整理 asp.net 动态数据网站简单应用,快速建立站点实现对库方便的增删改 利用asp.net路由实现url解析 智能客户端(Smart Client )中文文档及案例(转贴) 利用反射对对象属性赋值取值操作 男人30而立,30岁的男人喊起来!你们立了吗? jquery 实现从左边listbox选择至右边listbox asp.net 造成seesion 丢失的问题之一
转摘 JQUERY操作JSON例子
踏踏实实干 · 2011-12-08 · via 博客园 - 踏踏实实干

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代码就是实现的全部代码,有详细注释)


<!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)
代码如下:


<%@ 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做的,,很漂亮)
文字显得有点啰嗦,应该没走题,请大家给个及格分啦,