ASP.net通过JQuery实现Ajax操作
最近要用到ajax,可是.net自带那个速度实在太慢了。。。于是学了JQuery
这东西真的不错。。拿起jquery手册直接就能写。。。很容易上手。。在网上找了一个jquery实例。。。
再在里面测试了 几个不同的返回数据后面最多的反回Json数据。。当然我只是才学没多久。。知道这些够用了。。
下面是index.aspx的代码，当然也可以直接存成.html页也一样的。。
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="Text_Default" %>
<!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 id="Head1" runat="server">
<title>JSON练习</title>
<script src="js/jquery-1.4.2.min.js" type="text/javascript"></script> <!--引用 jquery类库-->
<script type="text/javascript">
$(function() {
$("#bt1").click(function() {
$.ajax({
url: "Default.aspx?id=1",
type: "get",
dataType: 'json',
cache: false,
beforeSend: function(result) {
},
success: function(result) {
var html = '';
$(result).each(function(i) //解析方法1
{
html += i + "---" + this.name + ":" + this.value + "\n";
alert(i + "---" + this.name + ":" + this.value);
});
alert(html);
},
error: function(result, status) {
if (status == 'error') {
alert("系统发生错误");
}
}
});
});
$("#bt2").click(function() {
$.ajax({
url: "Default.aspx?pid=2",
type: "get",
dataType: 'json',
cache: false,
beforeSend: function(result) {
},
success: function(result) {
alert(result.name);
alert(result.value);
alert(result.name + ":" + result.value);
},
error: function(result, status) {
if (status == 'error') {
alert("系统发生错误");
}
}
});
});
$("#bt3").click(function() {
$.ajax({
url: "Default.aspx?id=1",
type: "get",
dataType: 'json',
cache: false,
beforeSend: function(result) {
},
success: function(result) {
var html = '';
$.each(result, function(i, comment) //解析方法2
{
html += i + "---" + comment['name'] + ":" + comment['value'] + "\n";
alert(i + "---" + comment['name'] + ":" + comment['value']);
});
alert(html);
},
error: function(result, status) {
if (status == 'error') {
alert("系统发生错误");
}
}
});
});
//=====================================================自己加的=================================================================================
//Jquery 通过Post实现ajax
$("#zw").click(function() {
$.post(
"default.aspx?zw=Ajax_post",
{ text1: escape($("#text1").val()), text2: escape($("#text2").val()) },
function(data) {
alert(data);
}
);
});
//Jquery 通过ajax实现ajax
$("#zw2").click(function() {
$.ajax({
url: "default.aspx?a=ajax",
type: "get",
dataType: "text",
success: function(d) { alert(d); }
});
})
//Jquery 通过json实现ajax=========Ajax_json一维(方法一)
$("#zw3").click(function() {
$.ajax({
url: "default.aspx?a=json",
//type: "get",
dataType: "json",
cache: false, //不进行缓存
success: function(result) {
var html = '';
$(result).each(function(i) //解析方法1
{
html += i + "---" + this.value + "\n";
alert(i + "---" + this.value);
});
alert(html);
}
});
})
//Jquery 通过json实现ajax===============Ajax_json一维(方法二)
$("#zw4").click(function() {
$.ajax({
url: "default.aspx?a=json",
//type: "get",
dataType: "json",
cache: false, //不进行缓存
success: function(result) {
var html = '';
$.each(result, function(i,d) //解析方法2
{
html += i + "---" + d['value'] + "\n";
alert(i + "---" + d['value']);
});
alert(html);
}
});
})
//Jquery 通过json实现ajax===============Ajax_json二维(方法一)
$("#zw5").click(function() {
$.ajax({
url: "default.aspx?a=json222",
//type: "get",
dataType: "json",
cache: false, //不进行缓存
success: function(result) {
var html = '';
$(result).each(function(i) //解析方法1
{
html += "Line" + i + "===" + this.name1 + "--" + this.name2 + "\n";
alert("Line" + i + "===" + this.name1 + "--" + this.name2);
});
alert(html);
}
});
})
//Jquery 通过json实现ajax===============Ajax_json二维(方法二)
$("#zw6").click(function() {
$.ajax({
url: "default.aspx?a=json222",
//type: "get",
dataType: "json",
cache: false, //不进行缓存
success: function(result) {
var html = '';
$.each(result, function(i, comment) //解析方法2
{
html += "Line" + i + "===" + comment['name1'] + "--" + comment['name2'] + "\n";
alert("Line" + i + "===" + comment['name1'] + "--" + comment['name2']);
});
alert(html);
}
});
})
$("#zw7").click(function() {
$.ajax({
url: "Default.aspx?a=json333",
type: "get",
dataType: 'json',
cache: false,
beforeSend: function(result) {
},
success: function(result) {
alert(result.name1);
alert(result.name2);
alert(result.name3);
},
error: function(result, status) {
if (status == 'error') {
alert("系统发生错误");
}
}
});
});
});
</script>
</head>
<body>
<form id="form1" runat="server">
<div>
<input type="text" id="text1" value="111" />
<input type="text" id="text2" value="222" />
<br /><input id="bt1" type="button" value="点击返回json集合" />
<br /><input id="bt2" type="button" value="点击返回一个json字符串" />
<br /><input id="bt3" type="button" value="点击返回json集合(解析方法不一样)" />
<br /><br /><input id="zw" type="button" value="Ajax_post" />
<br /><input id="zw2" type="button" value="Ajax_ajax" />
<br /><br /><input id="zw3" type="button" value="Ajax_json一维(方法一)" />
<br /><input id="zw4" type="button" value="Ajax_json一维(方法二)" />
<br /><br /><input id="zw5" type="button" value="Ajax_json二维(方法一)" />
<br /><input id="zw6" type="button" value="Ajax_json二维(方法二)" />
<br /><br /><input id="zw7" type="button" value="Ajax_json只有一条" />
</div>
</form>
</body>
</html>
下面是提交ajax处理页我放在index.aspx.cs里面，我是测试所以直接放这页了。。
1 using System;
2 using System.Data;
3 using System.Configuration;
4 using System.Collections;
5 using System.Web;
6 using System.Web.Security;
7 using System.Web.UI;
8 using System.Web.UI.WebControls;
9 using System.Web.UI.WebControls.WebParts;
10 using System.Web.UI.HtmlControls;
11 using System.Text;
12 using System.Data.SqlClient;
13
14 public partial class Text_Default : System.Web.UI.Page
15 {
16 protected void Page_Load(object sender, EventArgs e)
17 {
18 if (!IsPostBack)
19 {
20 if (Request.QueryString["id"] != null)
21 {
22 StringBuilder str = new StringBuilder();
23 for (int i = 0; i < 4; i++)
24 {
25 str.AppendFormat("{{\"name\":\"{0}\",\"value\":\"{1}\"}},", "ssss" + i.ToString(), i.ToString());
26 }
27 Response.Write("[" + str.ToString().TrimEnd(',') + "]"); //去掉最后的 '，'返回一个json字符串
28 Response.End();
29 }
30 if (Request.QueryString["pid"] != null)
31 {
32 StringBuilder str = new StringBuilder();
33 str.AppendFormat("{{\"name\":\"{0}\",\"value\":\"{1}\"}}", "ssss5", "5");
34 Response.Write(str.ToString());
35 Response.End();
36 }
37
38
39 //Jquery 通过Post实现ajax
40 if (Request.QueryString["zw"] != null)
41 {
42 StringBuilder str = new StringBuilder();
43 if (Request.Form["text1"] != null) { str.Append("\nBtext1=" + Request.Form["text1"]); }
44 if (Request.Form["text2"] != null) { str.Append("\nBtext2=" + Request.Form["text2"]); }
45 for (int i = 0; i < 5; i++)
46 {
47 str.Append("\n" + Request.QueryString["zw"] + "=" + i);
48 }
49 str.Append("\n时间:"+DateTime.Now.ToString());
50 Response.Write(str.ToString());
51 Response.End();
52 }
53
54 //Jquery 通过ajax实现ajax
55 if (Request.QueryString["a"] =="ajax")
56 {
57 StringBuilder str = new StringBuilder();
58
59 str.AppendFormat("{{name:\"{0}\",value:\"{1}\"}}", "ajax", "5");
60
61 str.Append("\n时间:" + DateTime.Now.ToString());
62 Response.Write(str.ToString());
63 Response.End();
64 }
65
66
67 //Jquery 通过ajax实现ajax =====一维
68 if (Request.QueryString["a"] =="json")
69 {
70 StringBuilder str = new StringBuilder();
71
72 for (int i = 0; i < 3; i++)
73 {
74 str.AppendFormat("{{\"value\":\"{0}\"}},", "N" + i.ToString());
75 }
76
77 //str.Append("\n时间:" + DateTime.Now.ToString());
78 Response.Write("[" + str.ToString().TrimEnd(',') + "]"); //去掉最后的 '，'返回一个json字符串
79 Response.End();
80 }
81
82
83 //Jquery 通过ajax实现ajax222 ========二维
84 if (Request.QueryString["a"] == "json222")
85 {
86 StringBuilder str = new StringBuilder();
87
88 for (int i = 0; i < 3; i++)
89 {
90 str.AppendFormat("{{\"name1\":\"{0}\",\"name2\":\"{1}\"}},", "Name1:" + i.ToString(), "Name2:" + i.ToString());
91 }
92
93 //str.Append("\n时间:" + DateTime.Now.ToString());
94 Response.Write("[" + str.ToString().TrimEnd(',') + "]"); //去掉最后的 '，'返回一个json字符串
95 Response.End();
96 }
97
98 //Jquery 通过ajax实现ajax3333 ========一条一维
99 if (Request.QueryString["a"] == "json333")
100 {
101 StringBuilder str = new StringBuilder();
102
103 str.AppendFormat("\"name1\":\"{0}\",", "Name1:" + "1");
104
105 str.AppendFormat("\"name2\":\"{0}\",", "Name2:" + "2");
106
107 str.AppendFormat("\"name3\":\"{0}\",", "Name3:" + "3");
108
109
110 //str.Append("\n时间:" + DateTime.Now.ToString());
111 Response.Write("{" + str.ToString().TrimEnd(',') + "}"); //去掉最后的 '，'返回一个json字符串
112 Response.End();
113 }
114
115
116 //JScript.Alert(tt1.Value);
117 }
118 }
119
120 //连接数据库。用数据库的内容填充。
121 //private string GetDepotjson()
122 //{
123 // StringBuilder jsonstr = new StringBuilder();
124
125 // SqlDataReader dr = bd.GetList(""); //读取数据库，返回SqlDataReader
126 // while (dr.Read())
127 // {
128 // jsonstr.AppendFormat("{{name:\"{0}\",value:\"{1}\"}},", dr["Tname"], dr["TID"]);
129 // }
130 // dr.Close(); //关闭
131 // return "[" + jsonstr.ToString().TrimEnd(',') + "]"; //返回一个json字符串
132 //}
133
134
135
136 }
欢迎加入JAVA技术交流QQ群：179945282
欢迎加入ASP.NET(C#)交流QQ群：17534377
