Asp.Net+Jquery.Ajaxは2-$.Load

9303 ワード
asp.net
カタログ(更新された記事は接続され、7月25日から2～3日ごとに更新されます):
Asp.Net+Jquery.Ajax詳細1-開編(2012.07.25発)
Asp.Net+Jquery.Ajaxは2-$.Load(2012.07.26発)
Asp.Net+Jquery.Ajaxは3-$.getと$post(2012.07.30発)
Asp.Net+Jquery.Ajaxは4-$.getJSON(2012.07.31発)
Asp.Net+Jquery.Ajaxは5-$.getScript(2012.08.04発)
Asp.Net+Jquery.Ajaxは6-$.ajaxSetup
Asp.Net+Jquery.Ajax詳細7-グローバルAjaxイベント
Asp.Net+Jquery.Ajaxは8-コア$.ajax
Asp.Net+Jquery.Ajax詳細9-serializeとserializeArray
Asp.Net+Jquery.Ajaxは10-JSONとXML+を詳しく解いて最後に書きます
前回はajaxとは何か、オリジナルの実装方法について簡単に紹介しました.これからはJqueryについて詳しくお話しします.ajax.$からloadが始まります.
jQuery.load( url [, data][, callback] )
url:要求ページのURLアドレス
data(オプション):サーバに送信されるkey/valueデータ
callback(オプション):リクエスト完了時のコールバック関数
load()メソッドは、responseText,textStatus,XMLfttpRequestの3つのパラメータを有するコールバック関数(callback)を提供し、リクエストが返すコンテンツ、リクエストステータス、およびXMLfttpRequestオブジェクトを表す.
$("#result").load("Data/GetServiceInfo.aspx",function(responseText,textStatus,XMLHttpRequest){
//responseText:要求された内容
//textStatus:リクエストステータス:success、error、notmodified、timeout
//XMLHttpRequest:XMLHttpRequestオブジェクト
});
GetServiceInfoのみをロードする必要がある場合.aspxページ内のいくつかの要素は、load()メソッドのURLパラメータを使用して目的を達成することができます.URLパラメータにセレクタを指定することで、ロードされたHTMLドキュメントから必要なコンテンツを簡単にフィルタできます.
load()メソッドのURLパラメータの構文構造は「url selector」です.URLとセレクタの間にスペースがあります.
　
//loadをテストして、セレクタを使って、天津を濾過します
function LoadFilter(event) {
$("#result").load("data/GetCity.aspx?resultType=html&t="+ (new Date()).gettime()+「ul>li:not(:contains('天津')」);
}
load()メソッドの伝達方式はパラメータdataに基づいて自動的に指定される.パラメータ伝達がなければGET方式で伝達する.逆に、自動的にPOST方式に変換される.
//loadをテストして、Post方式で要求して、注意:デフォルトはGET方式を使用します-付加的なパラメータを伝達する時自動的にPOST方式に変換します
function LoadPost(event) {
$("#result").load("Data/GetServiceInfo.aspx", { "param": "TestLoad-Post"});
}
注意:1、load()メソッドでは、Ajaxリクエストが成功するかどうかにかかわらず、リクエストが完了するとコールバック関数(callback)がトリガーされます.
2.パラメータがあればGetServiceInfo.aspxページでパラメータを受信場合は、HttpContext.Current.Request[param]形式、Request.Querystingは入手できません.
例(vs 2010):
クライアント-GetServiceInfo.aspx— 
<%@ 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;
        }
    }
}

第2編は着いて、第1編のajaxの原始的な方法を比較して、今回の方法は明らかに簡潔になりました.第三編はすぐに殺す.このシリーズの文章が何を書いているのか、最初の記事を参照してください.
HTML5,CSS3,js
XSSとCSRFの浅い分析