当前位置:编程学习 > 网站相关 >>

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开发 , 其他 ,
CopyRight © 2022 站长资源库 编程知识问答 zzzyk.com All Rights Reserved
部分文章来自网络,