前后台通过Jq|json交互
json
适用于现代 C++ 的 JSON。
项目地址：https://gitcode.com/gh_mirrors/js/json
免费下载资源
·
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+" 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;
}
}
}
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+" 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，后台调试的数据：
GitHub 加速计划 / js / json
18
5
下载
适用于现代 C++ 的 JSON。
最近提交(Master分支：2 个月前 )
960b763e
5 个月前
8c391e04
8 个月前
旨在为数千万中国开发者提供一个无缝且高效的云端环境，以支持学习、使用和贡献开源项目。
更多推荐
2
0- 0
已为社区贡献2条内容
所有评论(0)