JQuery使用Ajax的一个简单应用
2008-06-26 17:55 Wings dark 阅读(1344) 评论(2) 编辑 收藏 举报
利用Jquery开发Ajax。这是一格最简单应用了,点击页面上按钮后,异步加载数据。
以下是html页面:
以下是ajax.aspx.cs文件:
以下是html页面:
1<%@ Page Language="C#" AutoEventWireup="true" CodeFile="JqueryTest.aspx.cs" Inherits="JqueryTest" %>
2<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
3<html xmlns="http://www.w3.org/1999/xhtml">
4<head runat="server">
5 <title>无标题页</title>
6 <script language="javascript" type="text/javascript" src="js/jquery.js"></script>
7 <script language="javascript" type="text/javascript" src="js/ajax.js"></script>
8</head>
9<body>
10 <form id="form1" runat="server">
11 <div id="divtest"></div>
12 <input type="button" id="btncl" value="数据" />
13 <div id="divtest2">
14 </div>
15 <div class="ajax"></div>
16 </form>
17</body>
18</html>
19
一个js文件,用于数据操作2<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
3<html xmlns="http://www.w3.org/1999/xhtml">
4<head runat="server">
5 <title>无标题页</title>
6 <script language="javascript" type="text/javascript" src="js/jquery.js"></script>
7 <script language="javascript" type="text/javascript" src="js/ajax.js"></script>
8</head>
9<body>
10 <form id="form1" runat="server">
11 <div id="divtest"></div>
12 <input type="button" id="btncl" value="数据" />
13 <div id="divtest2">
14 </div>
15 <div class="ajax"></div>
16 </form>
17</body>
18</html>
19
$(function(){
$("#btncl").click(function(){
$.ajax({
url: "Ajax.aspx",
type: "post",
data:"oper=gettext",
success: function(data,textStatus){
$('#divtest').css('background', 'yellow').html(data).show();
alert(textStatus);
$("#divtest2").html(data);
},
error: function(o){
// alert(o.responseText);
}
});
});
});
$(document).ready(function(){alert("欢迎")});
说明:页面加载时显示欢迎,点击button后调用后台ajax.aspx.cs中的数据。$("#btncl").click(function(){
$.ajax({
url: "Ajax.aspx",
type: "post",
data:"oper=gettext",
success: function(data,textStatus){
$('#divtest').css('background', 'yellow').html(data).show();
alert(textStatus);
$("#divtest2").html(data);
},
error: function(o){
// alert(o.responseText);
}
});
});
});
$(document).ready(function(){alert("欢迎")});
以下是ajax.aspx.cs文件:
1using System;
2using System.Collections;
3using System.Configuration;
4using System.Data;
5using System.Linq;
6using System.Web;
7using System.Web.Security;
8using System.Web.UI;
9using System.Web.UI.HtmlControls;
10using System.Web.UI.WebControls;
11using System.Web.UI.WebControls.WebParts;
12using System.Xml.Linq;
13
14public partial class Ajax : System.Web.UI.Page
15{
16 protected string resposne = "";
17 protected void Page_Load(object sender, EventArgs e)
18 {
19 string oper = Request.Form["oper"];
20 // resposne = "324345";
21 switch (oper)
22 {
23 case "gettext":
24 Gettext();
25 break;
26 default:
27 break;
28 }
29 Response.Write(resposne);
30 Response.End();
31 }
32
33 private void Gettext()
34 {
35 this.resposne = "123";
36 }
37}
38
很简单吧......2using System.Collections;
3using System.Configuration;
4using System.Data;
5using System.Linq;
6using System.Web;
7using System.Web.Security;
8using System.Web.UI;
9using System.Web.UI.HtmlControls;
10using System.Web.UI.WebControls;
11using System.Web.UI.WebControls.WebParts;
12using System.Xml.Linq;
13
14public partial class Ajax : System.Web.UI.Page
15{
16 protected string resposne = "";
17 protected void Page_Load(object sender, EventArgs e)
18 {
19 string oper = Request.Form["oper"];
20 // resposne = "324345";
21 switch (oper)
22 {
23 case "gettext":
24 Gettext();
25 break;
26 default:
27 break;
28 }
29 Response.Write(resposne);
30 Response.End();
31 }
32
33 private void Gettext()
34 {
35 this.resposne = "123";
36 }
37}
38