ホームページ >ウェブフロントエンド >jsチュートリアル >jQuery_jquery の Ajax get、post などのメソッドの詳細な説明

jQuery_jquery の Ajax get、post などのメソッドの詳細な説明

WBOY
WBOYオリジナル
2016-05-16 16:19:061224ブラウズ

load() メソッド は通常、Web サーバーから静的データ ファイルを取得するために使用されますが、これは ajax の完全な値を反映するものではありません。

プロジェクトで、サーバー上のページにいくつかのパラメーターを渡す必要がある場合は、$.get() または $.post() メソッド (または $.ajax() メソッド) を使用できます。

$.get() メソッド GET メソッドを使用して非同期リクエストを作成します。構造は次のとおりです: $.get(url [, data] [, callback] [, type])

$.get() メソッドのパラメータは次のように説明されています。

としてリクエスト URL に追加されます。
パラメータ名 タイプ 説明
URL 文字列 リクエストされた HTML ページの URL アドレス
データ(オプション) オブジェクト サーバーに送信されたキー/値データは、QueryString
コールバック(オプション) 関数 ロードが成功するとコールバック関数が呼び出され (このメソッドは Response の戻りステータスが成功の場合にのみ呼び出されます)、リクエストの結果とステータスが自動的にこのメソッドに渡されます
タイプ(オプション) 文字列 サーバーから返されるコンテンツの形式 (xml、html、スクリプト、json、テキスト、_default など)

$.post() メソッド。

$.post() メソッドと $.get() メソッドの構造と使用法は同じですが、それでも次のような違いがあります:

GET リクエストは URL の後にパラメータを渡しますが、POST リクエストは HTTP メッセージのエンティティ コンテンツとして Web サーバーに送信されます。
GET メソッドには送信されるデータのサイズ制限があります (通常は 2KB 以下) が、POST メソッドを使用して送信されるデータの量は GET メソッドよりもはるかに大きくなります (理論的には制限はありません)
GET メソッドで要求されたデータはブラウザによってキャッシュされるため、他のユーザーがブラウザの履歴からアカウント番号やパスワードなどのデータを読み取ることができます。場合によっては、GET メソッドは重大なセキュリティ問題を引き起こす可能性がありますが、POST メソッドはこれらの問題を比較的回避できます
GETメソッドとPOSTメソッドで転送されたデータは、サーバー側での取得方法が異なります。

$.getScript(): jQuery は、js ファイルを直接ロードするためのこのメソッドを提供します。これは、HTML フラグメントをロードするのと同じくらい簡単で便利で、JavaScript ファイルの処理は必要ありません。JavaScript ファイルは自動的に実行されます。

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

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

$(関数() {
$("#send").click(function () {
$.getScript("test.js");
});
})

他の ajax メソッドと同様、$.getScript() メソッドにもコールバック関数があり、JavaScript ファイルが正常にロードされた後に実行されます。

例: jQuery 公式カラー アニメーション プラグイン (jquery.color.js) をロードし、成功後に色の変更アニメーションを要素にバインドする場合:

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






<スタイル>
* {マージン: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;}
.block{幅:80px;高さ:80px;背景:#DDD;}







<スクリプトタイプ="text/javascript">
$(関数() {
$.getScript("jquery.color.js", function () {
$("#go").click(function () {
$(".block").animate({backgroundColor: 'pink'}, 1000)
.animate({backgroundColor: 'blue'}, 1000);
});
})
})



$.getJson(): このメソッドは JSON ファイルをロードするために使用され、その使用法は $.getScript() と同じです。

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




   
   
    <スタイル>
        * {マージン: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() {
            $.getJSON('test.json', function(data) {
                $('#resText').empty();
                var html = '';
                $.each( data , function(commentIndex, comment) {
                    html = '
' コメント['ユーザー名'] ':

' コメント['コンテンツ'] '

';
                })
                $('#resText').html(html);
            })
        })
    })


test.json 文件:

复制代 代码如下:

[
  {
    "ユーザー名": "张三",
    "content": "沙発行。"
  }、
  {
    "ユーザー名": "李四",
    "content": "板凳。"
  }、
  {
    "ユーザー名": "王五",
    "content": "地板。"
  }
]

 
JSONP 形式の回帰関数を使用して、他のウェブサイトの JSON データを追加します。例:

复制代码代码如下:




   
   
    <スタイル>
        * {マージン:0;パディング:0;}
        本文 { font-size:12px;}
        .para {
            幅:100px;
            高さ:100px;
            マージン:5px;
            ボーダー:0;
        }
   
   



   





<スクリプトタイプ="text/javascript">
    $(関数() {
        $('#send').click(function() {
            $.getJSON("https://api.flickr.com/services/feeds/photos_public.gne?tags=car&tagmode=any&format=json&jsoncallback=?",
                    関数(データ){
                        $.each(data.items, function( i,item ){
                            $(" ").attr("src", item.media.m).appendTo("#resText");
                            if ( i == 3 ) {
                                false を返します;
                            }
                        });
                    }
            );
        })
    })
    /**
* JSONP (JSON with Padding) は、サーバー側でスクリプト タグを統合してクライアントに返すことを可能にする非公式プロトコルで、JavaScript コールバック
の形式でクロスドメイン アクセスを可能にします。 * * 上記の URL アドレスはデータをリクエストすることはできません。説明のためにのみ使用されます。
**/


注:

jQuery は、URL 内のコールバック関数 (「url?callback=?」の最後の「?」など) を、コールバック関数を実行するための正しい関数名に自動的に置き換えます。
JSONP (JSON with Padding) は、サーバー側で Script タグを統合してクライアントに返すことを可能にする非公式のプロトコルで、JavaScript コールバックを介してクロスドメイン アクセスを実現します。 JSON は単純な括弧構造を備えたプレーン テキストであるため、多くのチャネルで JSON メッセージを交換できます。同一生成元ポリシーの制限により、開発者は外部サーバーと通信するときに XMLHttpRequest を使用できません。 JSONP は、同一生成元ポリシーをバイパスできるメソッドです。つまり、JSON タグと