Asp.Net+Jquery.Ajax详解2-$.Load

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="JqueryAjaxLoad.aspx.cs"
    Inherits="JqueryAjaxTest.JqueryAjaxLoad" %>

<!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 runat="server">
    <title>Jquery Ajax Test</title>
    <%--引入Jquery库--%>
    <script src="Scripts/jquery-1.7.2.min.js" type="text/javascript"></script>
    <script type="text/javascript">
        $(function () {
            //为各个按钮绑定事件
            $("#TestLoad-Get").bind("click", LoadGet);
            $("#TestLoad-Post").bind("click", LoadPost);
            $("#TestLoad-Callback").bind("click", LoadCallback);
            $("#TestLoad-Filter").bind("click", LoadFilter);
        } );


        //测试load，以Get方式请求
        //加时间戳(new Date()).getTime()，防止返回缓存内容 
        function LoadGet(event) {
            $("#result").load("Data/GetServiceInfo.aspx?param=TestLoad-Get&t=" + (new Date()).getTime());
        }

        //测试load，以Post方式请求，注意：默认使用 GET 方式 - 传递附加参数时自动转换为 POST 方式
        function LoadPost(event) {
            $("#result").load("Data/GetServiceInfo.aspx", { "param": "TestLoad-Post" });
        }

        //测试load，使用回调函数
        //注意：load()方法提供了回调函数（callback），该函数有三个参数，分别代表请求返回的内容、请求状态和XMLHttpRequest对象
        function LoadCallback(event) {

            $("#result").load("Data/GetServiceInfo.aspx", { "param": "TestLoad-Callback" }, function (responseText, textStatus, XMLHttpRequest) {

                $("#result").html("回调函数在起作用,结果：" + responseText);
        
            });
        }

        //测试load，使用选择器
        function LoadFilter(event) {
            $("#result").load("data/GetCity.aspx?resultType=html&t=" + (new Date()).getTime() + " ul>li:not(:contains('天津'))");

        }     
        
        </script>
</head>
<body>
    <form id="form1" runat="server">
    <div>
        <input id="TestLoad-Get" type="button" value="Load-Get方式" />
        <input id="TestLoad-Post" type="button" value="Load-Post方式" />
        <input id="TestLoad-Callback" type="button" value="Load-回调函数" />
        <input id="TestLoad-Filter" type="button" value="Load-过滤结果" />
           
        <div id="result">
        </div>
    </div>
    </form>
</body>
</html>

服务端1—GetCity.aspx—

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;

namespace JqueryAjaxTest.Data
{
    public partial class GetMethodInfo : System.Web.UI.Page
    {
        protected void Page_Load(object sender, EventArgs e)
        {

            string param = "";

            //获取参数
            if (!String.IsNullOrEmpty(HttpContext.Current.Request["param"]))
            {
                param = HttpContext.Current.Request["param"];
            }
            
            //清空缓冲区
            Response.Clear();
            //将字符串写入响应输出流
            Response.Write("Http请求的方式为："+Request.HttpMethod.ToUpper()+"; 传递过来的参数为:"+param);
            //将当前所有缓冲的输出发送的客户端，并停止该页执行
            Response.End();

        }
    }
}

服务端2——

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;

namespace JqueryAjaxTest.Data
{
    public partial class GetCity : System.Web.UI.Page
    {
        private string resultType = "json";
        protected void Page_Load(object sender, EventArgs e)
        {
            //获取请求的参数
            if (!String.IsNullOrEmpty(Request.QueryString["resultType"])) {

                resultType = Request.QueryString["resultType"].ToLower()=="html" ? "html" : "json";
            }
           string  html = GetResult(resultType);

           //清空缓冲区
           Response.Clear();
           //将字符串写入响应输出流
           Response.Write(html);
           //将当前所有缓冲的输出发送的客户端，并停止该页执行
           Response.End();
        }

        private string GetResult(string resultType) {
            string result = "";
            if (resultType == "html") {

               //返回的html
                result = @"<ul><li id=""1"">北京</li><li id=""2"">天津</li></ul>";
            }
            else if (resultType == "json") {
                //返回的json数据
                result = @"
[{""pkid"":""0001"",""ProvinceId"":""BJ"",""CityName"":""北京"",""CityNameEn"":""Beijing"",""PostCode"":""010"",""isHotCity"":false},
 {""pkid"":""0002"",""ProvinceId"":""TJ"",""CityName"":""天津"",""CityNameEn"":""Tianjin"",""PostCode"":""022"",""isHotCity"":false}]";
                  
            }
            return result;
        }
    }
}

第二篇到了，对比第一篇中的ajax原始方法，这次的方法明显简洁了许多。第三篇马上就会杀到。如果想这个系列的文章到底写些什么，请参见第一篇。

刷新页面返回顶部

javaspring

Asp.Net+Jquery.Ajax详解2-$.Load

About