Ajax基础应用

 

很多刚入行做Web开发的新人对Ajax不慎了解，下面是一个非常简单的Ajax获取数据的例子，希望对新人有所帮助。

 

一、先看要用Ajax获取数据的页面（index.aspx）

 

1、jquery部分

    <script src="js/jquery-1.4.2.min.js" type="text/javascript"></script>
    <script type="text/javascript">
        function get(e) {
            $.ajax({
                type: "GET", //(默认: "GET") 请求方式 ("POST" 或 "GET")， 默认为 "GET"。注意：其它 HTTP 请求方法，如 PUT 和 Delete 也可以使用，但仅部分浏览器支持。
                url: "ajax.aspx", //(默认: 当前页地址) 发送请求的地址（处理数据的页面地址）。
                dataType: "html", //预期服务器返回的数据类型。"html": 返回纯文本 HTML 信息；包含 script 元素。
                data: "cou=" + e, //发送到服务器的数据，其实就是传的参数和参数的值。加上前面的"url:"可以理解为ajax.aspx？cou=
                beforeSend: function (XMLHttpRequest) {
                   // $("#ctl00_ContentPlaceHolder1_content").html("正在载入.......");
                }, //发送请求前可修改 XMLHttpRequest 对象的函数。XMLHttpRequest 对象是唯一的参数。
                success: function (msg) {
                    if (e == "en") {
                        $("#en").addClass("cur");
                        $("#cn").removeClass("cur");
                    }
                    if (e == "cn") {
                        $("#cn").addClass("cur");
                        $("#en").removeClass("cur");
                    }
                    $("#ctl00_ContentPlaceHolder1_content").html(msg);
                } //请求成功后回调函数。在这的应用就是获得返回的数据
            });
        }
         //ajax还有一些参数，这里就只用这几个
    </script>

 

2、HTML部分

<div class="main float_r">          
             <h2 class="mainTitle">销售网络</h2>
             <div class="marketNetwork">
               <h3><a id="cn" class="cur"  onclick="get('cn');">国内</a><span class="p-lr5">/</span><a id="en" onclick="get('en');">国外</a></h3> 
               <label id="content" runat="server"></label><%--这里因为加了个runat="server"成为服务器控件，所以其id实际为ctl00_ContentPlaceHolder1_content，可以在页面源文件中看到--%>
             </div>  
        </div>

 

二、处理并返回数据页面（ajax.aspx）

 

1、HTML部分

　　ajax.aspx前端页面不用写任何东西

2、CS（后台）部分

        protected void Page_Load(object sender, EventArgs e)
        {
            string cou= Request.QueryString["cou"];//获取传过来的值
            try
            {
                if (!string.IsNullOrEmpty(cou))
                {
                    if (cou == "cn")
                    {
                        Response.Write("这是国内销售网络");//返回数据
                    }
                    if (cou == "en")
                    {
                        Response.Write("这是国外销售网络");//返回数据
                    }
                }
            }
            catch(Exception ex)
            {
               // Response.Write(ex);
            }
   
        }

 

最后的结果是

                                            

 

好了，简单ajax获取数据完成了，希望对大家有所帮助。