jQuery Ajax サンプルコード ($.ajax、$.post、$.get)

$.post と $.get は単純なメソッドです。複雑なロジックを処理したい場合は、やはり jQuery.ajax() を使用する必要があります。

1. $.ajax の一般的な形式

$.ajax({

   type: 'POST',

   url: url ,

  data: data ,

  success: success ,

  dataType: dataType

});

ログイン後にコピー

2. $.ajax

のパラメータの説明

パラメータの説明

<本体>

三、$.ajax需要注意的一些地方：

1.data主要方式有三种，html拼接的，json数组，form表单经serialize()序列化的；通过dataType指定，不指定智能判断。

2.$.ajax只提交form以文本方式，如果异步提交包含上传是传过不过去,需要使用jquery.form.js的$.ajaxSubmit

四、$.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&#63;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);  
  }
});

ログイン後にコピー

url: 要件は文字列型パラメータ (デフォルトは現在のページアドレス) で、リクエストの送信先のアドレスです。

type: パラメーターは String 型である必要があり、リクエストメソッド (post または get) はデフォルトで get になります。 put や

などの他の http リクエストメソッドに注意してください。

delete も使用できますが、一部のブラウザのみがサポートしています。

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

セット。

async: ブール型のパラメータが必要です。デフォルト設定はすべて非同期リクエストです。

同期リクエストを送信する必要がある場合は、このオプションを false に設定します。同期リクエストはブラウザをロックし、ユーザーは他の操作を待つ必要があることに注意してください

リクエストが完了した後にのみ実行できます。

キャッシュ: ブール型のパラメータが必要で、デフォルトは true (dataType が script の場合、デフォルトは false)。

false に設定すると、ブラウザーのキャッシュからリクエスト情報がロードされません。

data: サーバーに送信されるデータ、オブジェクト型または文字列型のパラメーターが必要です。文字列でない場合は、自動的に文字列形式に変換されます

式。取得リクエストは URL に追加されます。この自動変換を防ぐには、processData オプションをチェックします。オブジェクトはキー/値形式である必要があります

式、たとえば、{foo1:"bar1",foo2:"bar2"} は &foo1=bar1&foo2=bar2 に変換されます。配列の場合、JQueryは自動的に異なります

値は同じ名前に対応します。たとえば、{foo:["bar1","bar2"]} は &foo=bar1&foo=bar2 に変換されます。

dataType: パラメーターは文字列型である必要があり、サーバーによって返されることが予期されるデータ型です。指定しない場合、JQuery は自動的に mime

に基づいて http パッケージを作成します。

情報はresponseXMLまたはresponseTextとして返され、コールバック関数のパラメータとして渡されます。

利用可能なタイプは次のとおりです:

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

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

script: プレーンテキストの JavaScript コードを返します。結果は自動的にキャッシュされません。キャッシュパラメータが設定されていない限り。リモートリクエストでは

に注意してください。

(同じドメインの下にない)、すべての post リクエストは get リクエストに変換されます。

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

jsonp: JSONP 形式。 myurl?callback=? などの SONP フォームを使用して関数を呼び出すと、JQuery は最後の

を自動的に置き換えます。

「?」はコールバック関数を実行するための正しい関数名です。

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

beforeSend: パラメーターは Function タイプである必要があります。カスタム

を追加するなど、リクエストを送信する前に XMLHttpRequest オブジェクトの関数を変更できます。

HTTP ヘッダー。 beforeSend で false が返された場合、この ajax リクエストはキャンセルできます。 XMLHttpRequest オブジェクトは唯一のパラメータです

番号。

関数(XMLHttpRequest){

this; //この ajax リクエストを呼び出すときに渡されるオプションパラメーター

}

complete: パラメーターは Function タイプである必要があり、コールバック関数はリクエストの完了後に呼び出されます (リクエストが成功または失敗したときに呼び出されます)。

パラメータ: XMLHttpRequest オブジェクトと、成功したリクエストの種類を説明する文字列。

関数(XMLHttpRequest, textStatus){

this; //この ajax リクエストを呼び出すときに渡されるオプションパラメーター

}

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

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

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

関数(データ, textStatus){

//データは、xmlDoc、jsonObj、html、テキストなどです。

this; //この ajax リクエストを呼び出すときに渡されるオプションパラメーター

エラー: パラメーターは関数タイプである必要があり、関数はリクエストが失敗したときに呼び出されます。この関数には 3 つのパラメータがあります。つまり、XMLHttpRequest オブジェクト、エラー

エラーメッセージ、キャプチャされたエラーオブジェクト (オプション)。

ajax イベント関数は次のとおりです:

関数(XMLHttpRequest、textStatus、errorThrown){

//通常、textStatus と errorThrown のいずれか 1 つだけが情報を含みます

this; //この ajax リクエストを呼び出すときに渡されるオプションパラメーター

}

contentType: サーバーに情報を送信するときは、文字列型のパラメーターが必要です。コンテンツのエンコードタイプはデフォルトで

になります。

は「application/x-www-form-urlencoded」です。このデフォルト値は、ほとんどのアプリケーションに適しています。

dataFilter: Ajax から返された元のデータを前処理する関数である Function タイプのパラメーターが必要です。

データとタイプの 2 つのパラメータを指定します。 data は Ajax によって返される元のデータであり、型は jQuery.ajax

を呼び出すときに提供されます。

dataType パラメータ。関数によって返された値は、jQuery によってさらに処理されます。

関数(データ、型){

//処理されたデータを返します

データを返す;

}

グローバル: ブール型のパラメータが必要です。デフォルトは true です。グローバル ajax イベントをトリガーするかどうかを示します。 false に設定しても、グローバル

はトリガーされません。

ajax イベント、ajaxStart または ajaxStop を使用して、さまざまな ajax イベントを制御できます。

ifModified: ブール型パラメータが必要です。デフォルトは false です。サーバーデータが変更された場合にのみ新しいデータを取得します。

サーバーデータの変更を判断する基準となるのは、Last-Modified ヘッダー情報です。デフォルト値は false で、ヘッダー情報が無視されることを意味します。

jsonp: String 型のパラメータが必要で、jsonp リクエスト内のコールバック関数の名前を書き換えます。

该值用来替代在"callback=?"这种GET或POST请求中URL参数里的"callback"部分，例如

{jsonp:'onJsonPLoad'}会导致将"onJsonPLoad=?"传给服务器。

username：要求为String类型的参数，用于响应HTTP访问认证请求的用户名。

password：要求为String类型的参数，用于响应HTTP访问认证请求的密码。

processData：要求为Boolean类型的参数，默认为true。默认情况下，发送的数据将被转换为对象(从技术角度

来讲并非字符串)以配合默认内容类型"application/x-www-form-urlencoded"。如果要发送DOM

树信息或者其他不希望转换的信息，请设置为false。

scriptCharset：要求为String类型的参数，只有当请求时dataType为"jsonp"或者"script"，并且type是GET时

才会用于强制修改字符集(charset)。通常在本地和远程的内容编码不同时使用。

案例代码：

　$(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 += '' + comment['username']+ ':+ '';
      });
 
　     　$('#resText').html(html);
 
　     　}
 
　　});
 
　　     });
 
　　});

ログイン後にコピー

顺便说一下$.each()函数:

$.each()函数不同于JQuery对象的each()方法，它是一个全局函数，不操作JQuery对象，而是以一个数组或者对象作为第1个参数，以一个回调函数作为第2个参数。回调函数拥有两个参数：第1个为对象的成员或数组的索引，第2个为对应变量或内容。

以上这篇jQuery Ajax 实例代码 ($.ajax、$.post、$.get)就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持脚本之家。