Jquery Ajax

Jquery .load（）の例



Jquery Load Example



.load（url [、data] [、complete]）戻り値： jQuery

説明： サーバーからデータをロードし、返されたHTMLを一致した要素に配置します。

  • 追加されたバージョン： 1.0 .load（url [、data] [、complete]）

    • URL タイプ： 弦 リクエストの送信先のURLを含む文字列。
    • データ タイプ： PlainObject また 弦 リクエストとともにサーバーに送信されるプレーンオブジェクトまたは文字列。
    • 完了 タイプ： 関数 （（ 弦 responseText、 弦 textStatus、 jqXHR jqXHR）リクエストが完了したときに実行されるコールバック関数。

注：jQuery 3.0より前は、イベント処理スイートには次の名前のメソッドもありました。 。ロード（） 。古いバージョンのjQueryは、渡された引数のセットに基づいて起動するメソッドを決定しました。



この方法は、サーバーからデータをフェッチする最も簡単な方法です。ほぼ同等です$ .get（url、data、success）。ただし、グローバル関数ではなくメソッドであり、暗黙のコールバック関数があります。成功した応答が検出されたとき（つまり、textStatusは「success」または「notmodified」）、.load（）は、一致した要素のHTMLコンテンツを返されたデータに設定します。これは、メソッドのほとんどの使用法が非常に簡単であることを意味します。

$( '#result' ).load( 'ajax/test.html' );

セレクターによって一致する要素がない場合（この場合、ドキュメントにid = 'result'の要素が含まれていない場合）、Ajaxリクエストは いいえ 送信されます。



コールバック機能

'complete'コールバックが提供されている場合、後処理とHTML挿入が実行された後に実行されます。コールバックは、jQueryコレクションの要素ごとに1回発生し、これは、各DOM要素に順番に設定されます。

$( '#result' ).load( 'ajax/test.html', function() { alert( 'Load was performed.' ); });

上記の2つの例では、現在のドキュメントに「結果」のIDを持つ要素が含まれていない場合、.load（）メソッドは実行されません。

リクエスト方法

POSTメソッドは、データがオブジェクトとして提供される場合に使用されます。それ以外の場合は、GETが想定されます。



ページフラグメントの読み込み

NS.load（）メソッドとは異なり $ .get（） 、挿入するリモートドキュメントの一部を指定できます。これは、の特別な構文で実現されます。urlパラメータ。文字列に1つ以上のスペース文字が含まれている場合、最初のスペースに続く文字列の部分は、ロードするコンテンツを決定するjQueryセレクターであると見なされます。

上記の例を変更して、フェッチされたドキュメントの一部のみを使用することができます。

$( '#result' ).load( 'ajax/test.html #container' );

このメソッドを実行すると、次のコンテンツが取得されます。ajax / test.htmlですが、jQueryは返されたドキュメントを解析して、IDが容器。この要素は、その内容とともに、IDが次の要素に挿入されます。結果として、取得されたドキュメントの残りは破棄されます。

jQueryはブラウザのを使用します取得したドキュメントを解析して現在のドキュメントに挿入するための.innerHTMLプロパティ。このプロセス中に、ブラウザは多くの場合、次のようなドキュメントから要素をフィルタリングします。、、 また要素。その結果、によって取得された要素.load（）は、ドキュメントがブラウザによって直接取得された場合とまったく同じではない場合があります。

スクリプトの実行

電話するとき.load（）は、接尾辞付きのセレクター式のないURLを使用して、コンテンツがに渡されます。スクリプトが削除される前の.html（）。これにより、スクリプトブロックが破棄される前に実行されます。もしも.load（）は、URLにセレクター式を追加して呼び出されますが、DOMが更新される前にスクリプトが削除されるため、次のようになります。 いいえ 実行されました。両方のケースの例を以下に示します。

ここでは、JavaScriptが読み込まれますドキュメントの一部としての#aは正常に実行されます。

$( '#a' ).load( 'article.html' );

ただし、次の場合、ロードされるドキュメントのスクリプトブロックは#bは削除され、実行されません。

$( '#b' ).load( 'article.html #target' );

その他の注意事項：

  • ブラウザのセキュリティ制限により、ほとんどの「Ajax」リクエストは 同一生成元ポリシー ;リクエストは、別のドメイン、サブドメイン、ポート、またはプロトコルからデータを正常に取得できません。

例：

別のページのリストアイテムを順序付きリストにロードします。

doctype html> <html lang='en'> <head> <meta charset='utf-8'> <title>load demotitle> <style> body { font-size: 12px; font-family: Arial; } style> <script src='https://code.jquery.com/jquery-3.5.0.js'>script> head> <body> <b>Projects:b> <ol id='new-projects'>ol> <script> $( '#new-projects' ).load( '/resources/load.html #projects li' ); script> body> html>

デモ：

Ajaxリクエストでエラーが発生した場合に通知を表示します。

doctype html> <html lang='en'> <head> <meta charset='utf-8'> <title>load demotitle> <style> body { font-size: 12px; font-family: Arial; } style> <script src='https://code.jquery.com/jquery-3.5.0.js'>script> head> <body> <b>Successful Response (should be blank):b> <div id='success'>div> <b>Error Response:b> <div id='error'>div> <script> $( '#success' ).load( '/not-here.php', function( response, status, xhr ) { if ( status == 'error' ) { var msg = 'Sorry but there was an error: '; $( '#error' ).html( msg + xhr.status + ' ' + xhr.statusText ); } }); script> body> html>

デモ：

feeds.htmlファイルをfeedsのIDでdivにロードします。

$( '#feeds' ).load( 'feeds.html' );

結果：

<div id='feeds'><b>45b> feeds found.div>

データの配列をサーバーに渡します。

$( '#objectID' ).load( 'test.php', { 'choices[]': [ 'Jon', 'Susan' ] } );

上記と同じですが、追加のパラメーターをサーバーにPOSTし、サーバーが応答を終了したときに実行されるコールバックを送信します。

$( '#feeds' ).load( 'feeds.php', { limit: 25 }, function() { alert( 'The last 25 entries in the feed have been loaded' ); });