Ajax基础应用
很多刚入行做Web开发的新人对Ajax不慎了解,下面是一个非常简单的Ajax获取数据的例子,希望对新人有所帮助。
一、先看要用Ajax获取数据的页面(index.aspx)
1、jquery部分
1 <script src="js/jquery-1.4.2.min.js" type="text/javascript"></script>
2 <script type="text/javascript">
3 function get(e) {
4 $.ajax({
5 type: "GET", //(默认: "GET") 请求方式 ("POST" 或 "GET"), 默认为 "GET"。注意:其它 HTTP 请求方法,如 PUT 和 Delete 也可以使用,但仅部分浏览器支持。
6 url: "ajax.aspx", //(默认: 当前页地址) 发送请求的地址(处理数据的页面地址)。
7 dataType: "html", //预期服务器返回的数据类型。"html": 返回纯文本 HTML 信息;包含 script 元素。
8 data: "cou=" + e, //发送到服务器的数据,其实就是传的参数和参数的值。加上前面的"url:"可以理解为ajax.aspx?cou=
9 beforeSend: function (XMLHttpRequest) {
10 // $("#ctl00_ContentPlaceHolder1_content").html("正在载入.......");
11 }, //发送请求前可修改 XMLHttpRequest 对象的函数。XMLHttpRequest 对象是唯一的参数。
12 success: function (msg) {
13 if (e == "en") {
14 $("#en").addClass("cur");
15 $("#cn").removeClass("cur");
16 }
17 if (e == "cn") {
18 $("#cn").addClass("cur");
19 $("#en").removeClass("cur");
20 }
21 $("#ctl00_ContentPlaceHolder1_content").html(msg);
22 } //请求成功后回调函数。在这的应用就是获得返回的数据
23 });
24 }
25 //ajax还有一些参数,这里就只用这几个
26 </script>
2、HTML部分
1 <div class="main float_r">
2 <h2 class="mainTitle">销售网络</h2>
3 <div class="marketNetwork">
4 <h3><a id="cn" class="cur" onclick="get('cn');">国内</a><span class="p-lr5">/</span><a id="en" onclick="get('en');">国外</a></h3>
5 <label id="content" runat="server"></label><%--这里因为加了个runat="server"成为服务器控件,所以其id实际为ctl00_ContentPlaceHolder1_content,可以在页面源文件中看到--%>
6 </div>
7 </div>
二、处理并返回数据页面(ajax.aspx)
1、HTML部分
ajax.aspx前端页面不用写任何东西
2、CS(后台)部分
1 protected void Page_Load(object sender, EventArgs e)
2 {
3 string cou= Request.QueryString["cou"];//获取传过来的值
4 try
5 {
6 if (!string.IsNullOrEmpty(cou))
7 {
9 if (cou == "cn")
10 {
11 Response.Write("这是国内销售网络");//返回数据
12 }
13 if (cou == "en")
14 {
15 Response.Write("这是国外销售网络");//返回数据
16 }
17 }
18 }
19 &nbs
补充:Web开发 , 其他 ,