jQuery Ajax の使用法の詳細_jquery について話す

定義と使用法

ajax() メソッドは、HTTP リクエストを通じてリモート データを読み込みます。

このメソッドは、jQuery の基礎となる AJAX 実装です。シンプルで使いやすい高レベルの実装については、$.get、$.post などを参照してください。 $.ajax() は、作成した XMLHttpRequest オブジェクトを返します。ほとんどの場合、柔軟性を高めるためにあまり使用されないオプションを操作する必要がない限り、この関数を直接操作する必要はありません。

最も単純なケースでは、$.ajax() をパラメーターなしで直接使用できます。

注: すべてのオプションは、$.ajaxSetup() 関数を通じてグローバルに設定できます。

jQuery Ajax は Web アプリケーション開発で非常によく使用されており、主に ajax、get、post、load、getscript などの一般的な更新不要の操作メソッドが含まれています。それを紹介します。

最も単純な方法から始めましょう。複雑な Ajax リクエストを処理する場合、jQuery は jQuery.ajax() メソッドを使用します。 jQuery には、jQuery.ajax() メソッドをカプセル化するいくつかの単純なメソッドがあるため、単純な Ajax イベントを処理するときに jQuery.ajax() メソッドを使用する必要はありません。これらのメソッドの一部は以前の記事にあります。はすでに登場しているので、すぐに皆さんも使いこなせると思います。もちろん、jQuery.ajax() メソッドはこの記事の最優先事項であるため、この記事の後半で非常に具体的に説明します。

次の 5 つのメソッドは、一般的な Ajax リクエストの短い形式を実行します。複雑な Ajax リクエストを処理する場合は、jQuery.ajax() を使用する必要があります。

1.load(url,[データ],[コールバック])

リモート HTML ファイルのコードをロードして DOM に挿入します。デフォルトでは GET メソッドが使用され、パラメーターを渡すときに自動的に POST メソッドに変換されます。

◦url: ロードされるリモート URL アドレス
◦data: サーバーに送信されるキー/値データ
◦callback: ロード成功時のコールバック関数

サンプルコードは次のとおりです:

//无参数、无回调函数
$("#showload").load("load.htm");
//无回调函数
$("#showload").load("load.htm", { "para": "para-value" });
$("#showload").load("load.htm", { "para": "para-value" },
 function() {
  //处理
 })

ロードされたファイルの内容がここに表示されます Load

2.jQuery.get(url, [データ], [コールバック])

get メソッドを使用してサーバーからデータを取得します。

◦ リクエストを送信する URL アドレス
◦サーバーに送信するデータ
◦ロード成功時のコールバック関数

サンプルコードは次のとおりです:

$.get("jqueryget.htm", { "id": this.id },
 function(req) {
  //成功时的回调方法
  $("#showget").html(req);
 });
})

$.get() メソッドを使用して、ID を渡してさまざまなロゴを取得します。現時点ではリクエストは get メソッドを通じて取得されるため、パラメーター値を取得する際には Request.QueryString を使用する必要があることに注意してください。 Request Request.QueryString

との違いを確認してください。

Baidu ロゴ Google ロゴ

logo3.jQuery.post(url, [data], [callback])
がここに表示されます POST メソッドを使用して非同期リクエストを作成します。 jQuery.get()と比較すると、リクエストメソッドが異なるため、使用方法はjQuery.get()と同様ですので、ここでは特に説明しません。

4.jQuery.getScript(url,[callback])

GET メソッドを通じて JavaScript ファイルのロードと実行をリクエストします。この技術については、以前の記事でも触れましたが、jQuery.ajax を使用する簡単な方法でもあり、ajax が js を読み込むことが確認できるため、ここでは特に説明しません。

5.jQuery.getJSON(url,[データ],[コールバック])

getメソッドを通じてjson形式でデータを取得します。

サンプルコードは次のとおりです:

$.getJSON("http://api.flickr.com/services/feeds/photos_public.gne?tags=cat&tagmode=any&format=json&jsoncallback=?", function(req) {
 $.each(req.items, function(i, item) {
  if (i == vnum) {
   $("<img src="" + item.media.m + "" title="" + item.title + "" />").appendTo("#showjson");
  }
 });
});

同様に、これも jQuery.ajax() メソッドの短縮メソッドであり、次のメソッドに似ています:

パラメータリスト:

と入力します

パラメータ名	タイプ	説明
URL	文字列	(デフォルト: 現在のページのアドレス) リクエストを送信するアドレス。
	文字列	(デフォルト: "GET") リクエストメソッド ("POST" または "GET")、デフォルトは "GET" です。注: PUT や DELETE などの他の HTTP リクエスト メソッドも使用できますが、一部のブラウザでのみサポートされています。
タイムアウト	番号	リクエストのタイムアウト (ミリ秒) を設定します。この設定はグローバル設定をオーバーライドします。
非同期	ブール値	(デフォルト: true) デフォルトでは、すべてのリクエストは非同期リクエストです。同期リクエストを送信する必要がある場合は、このオプションを false に設定します。同期リクエストはブラウザをロックするため、ユーザーはリクエストが完了するまで他の操作を実行する必要があることに注意してください。
送信前	機能	XMLHttpRequest オブジェクトの機能は、カスタム HTTP ヘッダーの追加など、リクエストを送信する前に変更できます。 XMLHttpRequest オブジェクトが唯一のパラメータです。 <span style="color: rgb(0,0,255)">function (XMLHttpRequest) { <span style="color: rgb(0,0,255)">this; <span style="color: rgb(0,128,0)">// the options for this ajax <a target="_blank" style="color: rgb(51,153,255); text-decoration: none" href="http://www.php100.com/tags.php/request/">request</a>}</span></span></span>
cache	Boolean	(默认: true) jQuery 1.2 新功能，设置为 false 将不会从浏览器缓存中加载请求信息。
complete	Function	请求完成后回调函数 (请求成功或失败时均调用)。参数： XMLHttpRequest 对象，成功信息字符串。 <span style="color: rgb(0,0,255)">function (XMLHttpRequest, textStatus) { <span style="color: rgb(0,0,255)">this; <span style="color: rgb(0,128,0)">// the options for this ajax request}</span></span></span>
contentType	String	(默认: "application/x-www-form-urlencoded") 发送信息至服务器时内容编码类型。默认值适合大多数应用场合。
data	Object, 文字列	サーバーに送信されたデータ。リクエスト文字列形式に自動的に変換されます。 GET リクエストの URL に追加されます。この自動変換を無効にするには、processData オプションの説明を参照してください。キー/値形式である必要があります。配列の場合、jQuery は異なる値に同じ名前を自動的に割り当てます。たとえば、{foo:["bar1", "bar2"]} は '&foo=bar1&foo=bar2' に変換されます。
データタイプ	文字列	サーバーによって返されることが予期されるデータ型。指定しない場合、jQuery は HTTP パケットの MIME 情報に基づいて responseXML または responseText を自動的に返し、それをコールバック関数のパラメーターとして渡します。 使用可能な値: "xml": jQuery で処理できる XML ドキュメントを返します。 "html": スクリプト要素を含むプレーンテキストの HTML 情報を返します。 "script": プレーンテキストの JavaScript コードを返します。結果は自動的にキャッシュされません。 "json": JSON データを返します。 「jsonp」: JSONP 形式。 「myurl?callback=?」などの JSONP 形式を使用して関数を呼び出す場合、jQuery はコールバック関数を実行するために ? を正しい関数名に自動的に置き換えます。
エラー	機能	(デフォルト: 自動的に決定 (xml または html)) このメソッドは、リクエストが失敗したときに呼び出されます。このメソッドは、XMLHttpRequest オブジェクト、エラー メッセージ、および (おそらく) キャプチャされたエラー オブジェクトの 3 つのパラメータを取ります。 <span style="color: rgb(0,0,255)">function (XMLHttpRequest, textStatus, errorThrown) { <span style="color: rgb(0,128,0)">// 通常情况下textStatus和errorThown只有其中一个有值 <span style="color: rgb(0,0,255)">this; <span style="color: rgb(0,128,0)">// the options for this ajax request}</span></span></span></span>
global	Boolean	(默认: true) 是否触发全局 AJAX 事件。设置为 false 将不会触发全局 AJAX 事件，如 ajaxStart 或 ajaxStop 。可用于控制不同的Ajax事件
ifModified	Boolean	(默认: false) 仅在服务器数据改变时获取新数据。使用 HTTP 包 Last-Modified 头信息判断。
processData	Boolean	(默认: true) 默认情况下，发送的数据将被转换为对象(技术上讲并非字符串) 以配合默认内容类型 "application/x-www-form-urlencoded"。如果要发送 DOM 树信息或其它不希望转换的信息，请设置为 false。
success	Function	请求成功后回调函数。这个方法有两个参数：服务器返回数据，返回状态 <span style="color: rgb(0,0,255)">function (data, textStatus) { <span style="color: rgb(0,128,0)">// data could be xmlDoc, jsonObj, html, text, etc... <span style="color: rgb(0,0,255)">this; <span style="color: rgb(0,128,0)">// the options for this ajax request}</span></span></span></span>

这里有几个Ajax事件参数：beforeSend ，success ，complete ，error 。我们可以定义这些事件来很好的处理我们的每一次的Ajax请求。注意一下，这些Ajax事件里面的 this 都是指向Ajax请求的选项信息的(请参考说 get() 方法时的this的图片)。

 代码如下

$.ajax({
 url: url,
 dataType: 'json',
 data: data,
 success: callback
});

可能你还没有使用过json数据，我的小站中已经好几次提到了json的使用，如果你还不熟悉json格式，可以看看jquery移动listbox的值、jQuery下json的使用实例

获得json数据

这 里将随机显示一条json数据到目前为止我们总结了jQuery.ajax的五种简写方法，接下来让我们集中精神，看看jQuery.ajax()方法， 在使用中，笔者也是经常使用的jQuery.ajax()，因为大多数情况，我们需要对ajax请求出错的情况进行捕捉并处理。

6.jQuery.ajax()

使用jQuery.ajax()方法获取数据，下边给个常用写法，并做了相应的注释。

 代码如下

$.ajax({
 url: "http://www.hzhuti.com", //请求的url地址
 dataType: "json", //返回格式为json
 async: true, //请求是否异步，默认为异步，这也是ajax重要特性
 data: { "id": "value" }, //参数值
 type: "GET", //请求方式
 beforeSend: function() {
  //请求前的处理
 },
 success: function(req) {
  //请求成功时处理
 },
 complete: function() {
  //请求完成的处理
 },
 error: function() {
  //请求出错处理
 }
});

使用jQuery.ajax()

这里将显示数据

$.ajax我的实际应用例子

//1.$.ajax带json数据的异步请求
var aj = $.ajax( { 
 url:'productManager_reverseUpdate',// 跳转到 action 
 data:{ 
    selRollBack : selRollBack, 
    selOperatorsCode : selOperatorsCode, 
    PROVINCECODE : PROVINCECODE, 
    pass2 : pass2 
 }, 
 type:'post', 
 cache:false, 
 dataType:'json', 
 success:function(data) { 
  if(data.msg =="true" ){ 
   // view("修改成功！"); 
   alert("修改成功！"); 
   window.location.reload(); 
  }else{ 
   view(data.msg); 
  } 
  }, 
  error : function() { 
   // view("异常！"); 
   alert("异常！"); 
  } 
});

//2.$.ajax序列化表格内容为字符串的异步请求
function noTips(){ 
 var formParam = $("#form1").serialize();//序列化表格内容为字符串 
 $.ajax({ 
  type:'post',  
  url:'Notice_noTipsNotice', 
  data:formParam, 
  cache:false, 
  dataType:'json', 
  success:function(data){ 
  } 
 }); 
} 
//3.$.ajax拼接url的异步请求
var yz=$.ajax({ 
  type:'post', 
  url:'validatePwd2_checkPwd2?password2='+password2, 
  data:{}, 
  cache:false, 
  dataType:'json', 
  success:function(data){ 
   if( data.msg =="false" ) //服务器返回false，就将validatePassword2的值改为pwd2Error，这是异步，需要考虑返回时间 
   { 
    textPassword2.html("<font color='red'>业务密码不正确！</font>"); 
    $("#validatePassword2").val("pwd2Error"); 
    checkPassword2 = false; 
    return; 
   } 
  }, 
  error:function(){} 
});
//4.$.ajax拼接data的异步请求
$.ajax({ 
 url:'<%=request.getContextPath()%>/kc/kc_checkMerNameUnique.action', 
 type:'post', 
 data:'merName='+values, 
 async : false, //默认为true 异步 
 error:function(){ 
  alert('error'); 
 }, 
 success:function(data){ 
  $("#"+divs).html(data); 
 }
});

本篇的jQuery ajax使用就总结到这里，当然还有一些方法并未能全部的总结。如ajaxStart()、ajaxStop()等，在以后使用中，我会把它们也总结下来。