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 }

代码下载http://files.cnblogs.com/q149072205/AjaxTest.rar

转载于:https://www.cnblogs.com/q149072205/archive/2011/04/21/2023715.html