$.Ajax() メソッドのパラメータの使用方法-jsチュートリアル-php.cn

今回は$.Ajax()メソッドのパラメータの使い方と、$.Ajax()メソッドを使用する際の注意点を紹介します実際の事例を見てみましょう。

まず、Ajaxの概念をご紹介します

AJAXとは、「Asynchronous Javascript And XML」（非同期JavaScriptとXML）の略で、インタラクティブなWebアプリケーションを作成するためのWeb開発技術を指します。

AJAX = 非同期 JavaScript および XML (標準ユニバーサルマークアップ言語のサブセット)。

AJAX は、高速で動的な Web ページを作成するためのテクノロジーです。

AJAX を使用すると、バックグラウンドでサーバーと少量のデータを交換することで、Web ページを非同期に更新できます。これは、ページ全体を再読み込みしなくても、Web ページの一部を更新できることを意味します。

従来の Web ページ (AJAX を使用しない) では、コンテンツを更新する必要がある場合、Web ページ全体をリロードする必要があります。

ajaxメソッド

$.ajax()メソッドは、jQueryの最低レベルのAjax実装です。その構造は次のとおりです:

$.ajax(options)

このメソッドにはパラメータが 1 つだけありますが、このオブジェクトには $.ajax() メソッドに必要なリクエスト設定とコールバック関数が含まれており、パラメータはキー/値である形式が存在します。すべてのパラメータはオプションです。一般的に使用されるパラメータを以下の表に示します。

1.url

には、要求されたページを送信するために String 型のパラメータが必要です (デフォルトは現在のアドレス)。

2.type

にはString型のパラメータが必要で、リクエストメソッド(postまたはget)はデフォルトでgetになります。 put や delete などの他の http リクエストメソッドも使用できますが、一部のブラウザーでのみサポートされていることに注意してください。

3.timeout

には Number 型のパラメータが必要で、リクエストのタイムアウト (ミリ秒) を設定します。この設定は、$.ajaxSetup() メソッドのグローバル設定をオーバーライドします。

4.async

にはブール型のパラメータが必要です。デフォルト設定はすべて非同期リクエストです。同期リクエストが必要な場合は、このオプションを false に設定します。同期リクエストはブラウザをロックするため、ユーザーはリクエストが完了するまで他の操作を実行する必要があることに注意してください。

5.cache

はブール型パラメータである必要があり、デフォルトはtrue（dataTypeがScriptの場合、デフォルトはfalse）です。falseを設定すると、ブラウザのキャッシュからリクエスト情報がロードされません。

6.data

には、サーバーに送信されるデータであるオブジェクト型または文字列型のパラメータが必要です。文字列でない場合は、自動的に文字列形式に変換されます。 get リクエストは URL に追加されます。この自動変換を防ぐには、processData オプションを表示します。オブジェクトはキー/値形式である必要があります。たとえば、{foo1:"bar1",foo2:"bar2"} は &foo1=bar1&foo2=bar2 に変換されます。配列の場合、JQuery は異なる値に同じ名前を自動的に割り当てます。たとえば、{foo:["bar1","bar2"]} は &foo=bar1&foo=bar2 に変換されます。

7.dataType

には文字列型のパラメータが必要であり、サーバーから返されるデータ型が予期されます。指定しない場合、jQuery は HTTP パッケージのマイニング情報に基づいて、responseXML または responseText を自動的に返し、それをコールバック関数のパラメーターとして渡します。利用可能な型は次のとおりです:

xml: jQuery で処理できる XML ドキュメントを返します。

html: プレーンテキストの HTML 情報を返します。含まれている script タグは、DOM に挿入されると実行されます。

script: プレーンテキストの JavaScript コードを返します。キャッシュパラメータが設定されていない限り、結果は自動的にキャッシュされません。 (同じドメインの下ではなく) リモート要求を行う場合、すべての post 要求が get 要求に変換されることに注意してください。

json: JSONデータを返します。

jsonp: JSON形式。 myurl?callback=? などの JSONP 形式を使用して関数を呼び出すと、JQuery は最後の「?」を正しい関数名に自動的に置き換えてコールバック関数を実行します。

text: プレーンテキスト文字列を返します。

8.beforeSend

には Function タイプのパラメータが必要です。カスタム HTTP ヘッダーの追加など、リクエストを送信する前に XMLHttpRequest オブジェクトの関数を変更できます。 beforeSend で false が返された場合、この ajax リクエストはキャンセルできます。 XMLHttpRequest オブジェクトが唯一のパラメータです。

function(XMLHttpRequest){
　　　　this;//调用本次ajax请求时传递的options参数
　　}

ログイン後にコピー

9.complete

には、リクエストの完了後に呼び出される (リクエストが成功したか失敗したかに関係なく呼び出される) コールバック関数である Function タイプのパラメータが必要です。パラメータ: XMLHttpRequest オブジェクトと、成功したリクエストの種類を説明する文字列。

　　function(XMLHttpRequest,textStatus){
　　　　this; //调用本次ajax请求时传递的options参数
　　}

ログイン後にコピー

10.success

には、関数タイプのパラメータが必要です。リクエストが成功した後に呼び出されるコールバック関数には、2 つのパラメータがあります。

(1) サーバーから返され、dataType パラメーターに従って処理されたデータ。

(2) ステータスを説明する文字列。

　　function(data,textStatus){
　　　　//data可能是xmlDoc、jsonObj、html、text等
　　　　this; //调用本次ajax请求时传递的options参数
　　}

ログイン後にコピー

11.error

には、リクエストが失敗したときに呼び出される関数である Function タイプのパラメーターが必要です。この関数には、XMLHttpRequest オブジェクト、エラーメッセージ、キャプチャされたエラーオブジェクト (オプション) という 3 つのパラメータがあります。 ajax イベント関数は次のとおりです。

　　function(XMLHttpRequest,textStatus,errorThrown){
　　　　//通常情况下textStatus和errorThrown只有其中一个包含信息
　　　　this; //调用本次ajax请求时传递的options参数
　　}

ログイン後にコピー

12.contentType

は、サーバーに情報を送信するときに String 型のパラメータを必要とします。コンテンツのエンコーディングタイプのデフォルトは「application/x-www-form-urlencoded」です。このデフォルト値は、ほとんどのアプリケーションに適しています。

13.dataFilter

には、Ajaxによって返された元のデータを前処理する関数であるFunctionタイプのパラメータが必要です。データとタイプの 2 つのパラメータを指定します。 data は Ajax によって返される元のデータで、type は jQuery.ajax を呼び出すときに指定される dataTYpe パラメーターです。関数によって返された値は、jQuery によってさらに処理されます。

　　function(data,type){
　　　　//返回处理后的数据
　　　　return data;
　　}

ログイン後にコピー

14.global

にはブール型のパラメータが必要で、デフォルトはtrueです。グローバル ajax イベントをトリガーするかどうかを示します。 false に設定すると、グローバル ajax イベントはトリガーされません。ajaxStart と ajaxStop を使用してさまざまな ajax イベントを制御できます。

15.ifModified

にはブール型のパラメータが必要で、デフォルトはfalseです。サーバーデータが変更された場合にのみ新しいデータを取得します。サーバーデータの変更を判断するための基礎は、Last-Modified ヘッダー情報です。デフォルト値は false で、ヘッダー情報が無視されることを意味します。

16.jsonp

は String 型のパラメータを必要とし、jsonp リクエスト内のコールバック関数の名前を書き換えます。この値は、「callback=?」などの GET または POST リクエストの URL パラメーターの「callback」部分を置換するために使用されます。たとえば、{jsonp:'onJsonPLoad'} は「onJsonPLoad=?」に渡されます。サーバー。

17.username

は、HTTPアクセス認証リクエストのユーザーに応答するために使用されるString型パラメータである必要があります。

18.password

は、HTTPアクセス認証リクエストに応答するために使用されるパスワードである文字列型パラメータである必要があります。

19.processData

にはブール型のパラメータが必要で、デフォルトはtrueです。デフォルトでは、送信されたデータは、デフォルトのコンテンツタイプ「application/x-www-form-urlencoded」に一致するようにオブジェクト (技術的には文字列ではない) に変換されます。 DOM ツリー情報やその他の変換したくない情報を送信する場合は、false に設定します。

20.scriptCharset

は、文字列タイプのパラメータである必要があります。これは、リクエスト中にdataTypeが「jsonp」または「script」の場合にのみ文字セット（charset）を強制的に変更するために使用されます。、タイプは GET です。通常、ローカルとリモートのコンテンツのエンコーディングが異なる場合に使用されます。

ケースコード:

$(function(){
 $('#send').click(function(){
  $.ajax({
  type: "GET",
  url: "test.json",
  data: {username:$("#username").val(), content:$("#content").val()},
  dataType: "json",
  success: function(data){
    $('#resText').empty(); //清空resText里面的所有内容
    var html = '';
    $.each(data, function(commentIndex, comment){
    html += '<p class="comment"><h6>' + comment['username']
      + ':</h6><p class="para"&#39; + comment[&#39;content&#39;]
      + &#39;</p></p>';
    });
    $('#resText').html(html);
   }
  });
 });
});

ログイン後にコピー

ナレッジリンク:

1. $.each() 関数: $.each() 関数は、jQuery オブジェクトの each() メソッドとは異なります。 jQuery オブジェクトは機能しません。この関数は 2 つのパラメーターを受け取ります。最初のパラメーターは配列またはオブジェクトで、2 番目のパラメーターはコールバック関数です。コールバック関数には 2 つのパラメータがあります。最初のパラメータは配列のインデックスまたはオブジェクトのメンバーで、2 番目のパラメータは対応する変数またはコンテンツです。

　　$.each(data,function(commentIndex,comment){
  //doSomething;
 })

ログイン後にコピー

2、ajaxStart()与ajaxStop()：当Ajax请求开始时，会触发ajaxStart()方法的回调函数。当Ajax请求结束时，会触发ajaxStop()方法的回调函数。这些方法都是全局的方法，因此无论创建它们的代码位于何处，只要有Ajax请求发生时，就会触发它们。

有时候页面需要加载一些图片，可能速度回比较慢，如果在加载过程中，不给用户提供一些提示和反馈信息，很容易让用户误认为按钮单击无用，使用户对网站失去信息。

此时，我们就需要为网页添加一个提示信息，常用的提示信息是“加载中...”，代码如下：

<p id="loading">加载中...</p>

ログイン後にコピー

当Ajax请求开始时，将此元素显示，用来提示用户Ajax请求正在进行；当Ajax请求结束后，将此元素隐藏。代码如下：

$("#loading").ajaxStart(function(){
　　　　$(this).show();
　　}).ajaxStop(function(){
 $(this).hide();
 })

ログイン後にコピー

好了，下面再给大家分享一个案例代码：

$(function(){
 $('#send').click(function(){
  $.ajax({
  type: "GET",
  url: "test.json",
  data: {username:$("#username").val(), content:$("#content").val()},
  dataType: "json",
  success: function(data){
    $('#resText').empty(); //清空resText里面的所有内容
    var html = ''; 
    $.each(data, function(commentIndex, comment){
    html += '<p class="comment"><h6>' + comment['username']
      + ':</h6><p class="para"&#39; + comment[&#39;content&#39;]
      + &#39;</p></p>';
    });
    $('#resText').html(html);
   }
  });
 });
});

ログイン後にコピー

end，代码到此结束。

相信看了本文案例你已经掌握了方法，更多精彩请关注php中文网其它相关文章！