Jquery での $.post と $.ajax の使用法の概要-jsチュートリアル-php.cn

Jquery での $.post と $.ajax の使用法の概要

PHPz

リリース： 2018-10-15 15:23:58

オリジナル

1151 人が閲覧しました

Jquery の $.ajax の使用:

jQuery.ajax( options ): HTTP リクエストを通じてリモートデータをロードします。これは、jQuery の基礎となる AJAX 実装です。。シンプルで使いやすい高レベルの実装については、$.get、$.post などを参照してください。

$.ajax() は、作成した XMLHttpRequest オブジェクトを返します。ほとんどの場合、このオブジェクトを直接操作する必要はありませんが、特殊な場合には、リクエストを手動で終了するために使用できます。

注: dataType オプションを指定する場合は、サーバーが正しい MIME 情報を返すことを確認してください (例: xml は "text/xml" を返します)。 MIME タイプが正しくないと、予期しないエラーが発生する可能性があります。「AJAX リクエストのデータ型の指定」を参照してください。

データ型が「script」に設定されている場合、すべてのリモート (同じドメインにない) POST リクエストは GET に変換されます。

$.ajax() にはパラメーターが 1 つだけあります: パラメーターキー/値オブジェクト (各設定とコールバック関数の情報が含まれます)。以下の詳細なパラメータオプションを参照してください。

jQuery 1.2 では、ドメインを越えて JSON データを読み込むことができます。これを使用する場合は、データ型を JSONP に設定する必要があります。「myurl?callback=?」などの JSONP 形式を使用して関数を呼び出す場合、jQuery はコールバック関数を実行するために ? を正しい関数名に自動的に置き換えます。データ型が「jsonp」に設定されている場合、jQuery は自動的にコールバック関数を呼び出します。 (よくわかりません)

jquery ajax パラメータリスト:

url(String)

(デフォルト: 現在のページのアドレス) リクエストを送信するアドレス。

type(String)
リクエストメソッド (「POST」と「GET」の 2 つのパラメータがあります)、デフォルトは「GET」です。注: PUT や DELETE などの他の HTTP リクエストメソッドも使用できますが、一部のブラウザでのみサポートされています。

timeout(Number)

リクエストのタイムアウト(ミリ秒)を設定します。この設定はグローバル設定をオーバーライドします。

async(Boolean)

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

beforeSend(Function)

カスタム HTTP ヘッダーの追加など、リクエストを送信する前に XMLHttpRequest オブジェクトの関数を変更できます。 XMLHttpRequest オブジェクトが唯一のパラメータです。

コードは次のとおりです。

function(XMLHttpRequest){ this; // the options for this ajax request}
cache(Boolean)

ログイン後にコピー

リクエスト結果をキャッシュするかどうか (デフォルト) : true)、 false に設定すると、ブラウザのキャッシュからリクエスト情報が読み込まれなくなります。開発の初期段階では false に設定するのが最善です。そうしないと、デバッグに不便になります。

complete(Function)

リクエスト完了後のコールバック関数 (リクエストが成功または失敗したときに呼び出されます)。パラメータ: XMLHttpRequest オブジェクト、成功情報文字列。

コードは次のとおりです。

function(XMLHttpRequest,textStatus){
 this;//theoptionsforthisajaxrequest
}ログイン後にコピー

contentType(String)

(デフォルト: " application/x-www-form-urlencoded") サーバーに情報を送信するときのコンテンツエンコードタイプ。デフォルト値はほとんどのアプリケーションに適しています。

data(Object,String)

サーバーに送信されたデータ。リクエスト文字列形式に自動的に変換されます。 GET リクエストの URL に追加されます。この自動変換を無効にするには、processData オプションの説明を参照してください。キー/値形式である必要があります。配列の場合、jQuery は異なる値に同じ名前を自動的に割り当てます。たとえば、{foo:["bar1", "bar2"]} は '&foo=bar1&foo=bar2' に変換されます。

dataType(String)

サーバーから返されるデータ型を定義します。指定しない場合、jQuery は HTTP パケットの MIME 情報に基づいて responseXML または responseText を自動的に返し、それをコールバック関数のパラメーターとして渡します。
"xml": jQuery で処理できる XML 形式のデータを返します。
"html": プレーンテキストの HTML 形式データを返します。スクリプト要素を含めることができます。
"script": プレーンテキストの JavaScript コードを返します。結果は自動的にキャッシュされません。
"json": JSON データを返します。
「jsonp」: JSONP 形式。「myurl?callback=?」などの JSONP 形式を使用して関数を呼び出す場合、jQuery はコールバック関数を実行するために ? を正しい関数名に自動的に置き換えます。

error(関数)

(デフォルト:自動判定(xmlまたはhtml)) リクエストが失敗した場合にこのメソッドが呼び出されます。このメソッドは、XMLHttpRequest オブジェクト、エラーメッセージ、および (おそらく) キャプチャされたエラーオブジェクトの 3 つのパラメータを取ります。

コードは次のとおりです

function(XMLHttpRequest,textStatus,errorThrown){
 //通常情况下textStatus和errorThown只有其中一个有值
 this;//theoptionsforthisajaxrequest
}ログイン後にコピー

global(Boolean)

是否触发全局 AJAX 事件(默认: true) 。设置为 false 将不会触发全局 AJAX 事件，如 ajaxStart 或 ajaxStop 。可用于控制不同的Ajax事件

ifModified(Boolean)

(默认: false) 仅在服务器数据改变时获取新数据。使用 HTTP 包 Last-Modified 头信息判断。

processData(Boolean)

设置发送数据的信息格式(默认: true)，设置为 true 的时候发送的数据将被转换为对象(技术上讲并非字符串) 以配合默认内容类型 "application/x-www-form-urlencoded"。如果要发送 DOM 树信息或其它不希望转换的信息，请设置为 false。

success(Function)

请求成功后回调函数。这个方法有两个参数：服务器返回数据，返回状态

代码如下:

function(data,textStatus){ 
 //datacouldbexmlDoc,jsonObj,html,text,etc... 
 this;//theoptionsforthisajaxrequest 
}ログイン後にコピー

下面以一则示例解释一下该方法的具体的用法：

$.ajax({ 
  type:&#39;get&#39;, 
  url:&#39;http://www.www.daimajiayuan.com/rss&#39;, 
  beforeSend:function(XMLHttpRequest){ 
    //ShowLoading(); 
  }, 
  success:function(data,textStatus){ 
    $(&#39;.ajax.ajaxResult&#39;).html(&#39;&#39;); 
    $(&#39;item&#39;,data).each(function(i,domEle){ 
      $(&#39;.ajax.ajaxResult&#39;).append(&#39;&#39;+$(domEle).children(&#39;title&#39;).text()+&#39;&#39;); 
    }); 
  }, 
  complete:function(XMLHttpRequest,textStatus){ 
    //HideLoading(); 
  }, 
  error:function(){ 
    //请求出错处理 
  } 
});

ログイン後にコピー

Jquery的$.post的用法：

3. jQuery.post( url, [data], [callback], [type] ) ：使用POST方式来进行异步请求
jquery $.post 方法参数列表（说明）：
url (String) : 发送请求的URL地址.
data (Map) : (可选) 要发送给服务器的数据，以 Key/value 的键值对形式表示，可将此值放到url中。
callback (Function) : (可选) 载入成功时回调函数(只有当Response的返回状态是success才能调用该方法)。

type (String) : (可选)客户端请求的数据类型(JSON,XML,等等)

这是一个简单的 POST 请求功能以取代复杂 $.ajax ，请求成功时可调用回调函数。如果需要在出错时执行函数，请使用 $.ajax。
下面是一个使用$.post的简单示例代码：

$.post( 
  &#39;http://www.daimajiayuan.com/ajax.php&#39;, 
  {Action:"post",Name:"lulu"}, 
  function(data,textStatus){ 
    //data可以是xmlDoc,jsonObj,html,text,等等. 
    //this;//这个Ajax请求的选项配置信息，请参考jQuery.get()说到的this 
    alert(data.result); 
  }, 
  "json"//这里设置了请求的返回格式为"json" 
);

ログイン後にコピー

如果你设置了请求的格式为"json"，此时你没有设置Response回来的ContentType 为：Response.ContentType = "application/json"; 那么你将无法捕捉到返回的数据。

注意，上面的示例中 alert(data.result); 由于设置了Accept报头为"json"，这里返回的data就是一个对象，因此不需要用eval()来转换为对象。

以上所述就是本文的全部内容了，希望大家能够喜欢。