jQuery_jqueryのAjaxロードメソッドの詳細説明-jsチュートリアル-php.cn

jQuery_jqueryのAjaxロードメソッドの詳細説明

WBOY

リリース： 2016-05-16 16:20:19

オリジナル

1390 人が閲覧しました

まず Ajax の例を見てみましょう

<スクリプトタイプ="text/javascript">
関数 Ajax() {
var xmlHttpReq = null;// XMLHttpRequest オブジェクトをロードするために空のオブジェクトを宣言します
If(window.ActiveXObject) {
xmlHttpReq = new ActiveXObject("Microsoft.XMLHTTP");//IE5 IE6 では、ActiveXObject
の形式で XMLHttpRequest が導入されています。 } else if(window.XMLHttpRequest) {//IE5 IE6 以外のブラウザでは、XMLHttpRequest は window
のサブオブジェクトです xmlHttpReq = new XMLHttpRequest();//XMLHttpRequest オブジェクトをインスタンス化します
}
If(xmlHttpReq != null) {
xmlHttpReq.open("GET", "test.jsp", true);//open() メソッドを呼び出し、非同期モードを使用します
xmlHttpReq.onreadystatechange = RequestCallBack;//コールバック関数を設定します
xmlHttpReq.send(null);//get メソッドを使用して送信されるため、null パラメーターを使用して
を呼び出すことができます。 }

function RequestCallBack() {//readyState 値が変更されると、この関数が呼び出されます}
If(xmlHttpReq.readyState == 4) {
If(xmlHttpReq.status == 200) {
// xmlHttpReq.responseText の値を id resText
の要素に代入します document.getElementById("resText").innerHTML = xmlHttpReq.responseText;
}
}
}
}

test.jsp の内容:

コードをコピーしますコードは次のとおりです:

<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>

<%out.println("Hello Ajax!");%>

jQuery の Ajax を見てみましょう

1.load()

load() メソッドは、jQuery で最も単純で最も一般的に使用される Ajax メソッドで、HTML コードをリモートでロードして DOM に挿入できます。

リモート HTML コード:

コードをコピーコードは次のとおりです:

張三:

ソファ。

李思:

ベンチ。

王武:

床

load() は HTML をロードします

コードをコピーしますコードは次のとおりです:

<スタイル>
* {マージン:0;}
body { font-size:12px;}
.comment { マージントップ:10px; パディング:10px; ボーダー:1px ソリッド #ccc;background:#DDD;}
.comment h6 { font-weight:700; font-size:14px;}
.para { margin-top:5px; 背景:#DDD;}

コメント済み

<スクリプトタイプ="text/javascript">
$(関数() {
$("#send").click(function () {
$("#resText").load("test.html");
});
})
/**
* jQuery での Ajax
*
* jQuery は Ajax 操作をカプセル化します、
* * jQuery では、$.ajax() メソッドは最下位のメソッド
です。 * 2 番目の層は、load()、$.get()、$.post() メソッドです
* 3 番目の層は $.getScript() メソッドと $.getJSON() メソッドです
*
*
*load() メソッドは、jQuery で最も単純で最も一般的に使用される Ajax メソッドで、リモート HTML コードをロードして DOM に挿入できます。
* *load(url [, data] [, callback])
*
* * url URL 文字列 HTML インターフェースの URL アドレスをリクエストします
* * data (オプション) サーバーに送信されるオブジェクトのキー/値データ
* * callback(optional) Function リクエストが成功したか失敗したかにかかわらず、リクエストが完了したときのコールバック関数
**/

load() はフィルタリングされた HTML ドキュメントをロードします

コードをコピーコードは次のとおりです:

    <スタイル>
        * {マージン:0;パディング:0;}
        本文 { font-size:12px;}
        .comment { margin-top:10px;パディング:10px; border:1px ソリッド #ccc;background:#DDD;}
        .comment h6 { font-weight:700; font-size:14px;}
        .para { マージントップ:5px;テキストインデント:2em;背景:#DDD;}

既评论

<スクリプトタイプ="text/javascript">
    $(関数() {
        $("#send").click(function () {
            $("#resText").load("test.html .para");
        });
    })
    /**
* 読み込まれた HTML ドキュメントをフィルターします
*
※load()メソッドのURLパラメータの構文構造は「urlセレクタ」です。URLとセレクタの間にはスペース
が入っています。 *
* *load()メソッドの転送方法はパラメータデータに基づいて自動で指定されます。
* * パラメーターが渡されない場合は、GET が使用されます。 * * それ以外の場合は、自動的に POST 配信に変換されます
*
* **/

load() メソッド---回调関数

复制代码代码如下:

既评论

<スクリプトタイプ="text/javascript">
    $(関数() {
        $("#send").click(function () {
            $("#resText").load("test.html .para", function (responseText, textStatus, XMLHttpRequest) {
                アラート($(this).html());
                alert(responseText);//要求が返された内容
                alert(textStatus);//请要求状態：成功、エラー、未変更、タイムアウト
                alert(XMLHttpRequest);//XMLHttpRequest对オブジェクト
            });
        });
    })
    /**
*
*load()メソッドのコールバックパラメータ
*
* **/

終了

以上が本書のすべての内容であり、お役に立てることが期待されます。