Exemple de code jQuery Ajax ($.ajax, $.post, $.get)_jquery

$.post et $.get sont des méthodes simples Si vous souhaitez gérer une logique complexe, vous devez toujours utiliser jQuery.ajax()

1.Format général de $.ajax

$.ajax({

   type: 'POST',

   url: url ,

  data: data ,

  success: success ,

  dataType: dataType

});

2. Description des paramètres de $.ajax

Description du paramètre

url

Obligatoire. Spécifie l'URL à laquelle la demande doit être envoyée.

données

Facultatif. Valeur de mappage ou de chaîne. Spécifie les données à envoyer au serveur avec la requête.

succès (données, textStatus, jqXHR)

Facultatif. La fonction de rappel exécutée lorsque la demande réussit.

Type de données

url	必需。规定把请求发送到哪个 URL。
data	可选。映射或字符串值。规定连同请求发送到服务器的数据。
success(data, textStatus, jqXHR)	可选。请求成功时执行的回调函数。
dataType	可选。规定预期的服务器响应的数据类型。 默认执行智能判断（xml、json、script 或 html）。

Facultatif. Spécifie le type de données de la réponse attendue du serveur. Le jugement intelligent (xml, json, script ou html) est effectué par défaut.

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

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

  2.$.ajax只提交form以文本方式，如果异步提交包含28897b20adb25fbae118a3f80f538dec上传是传过不过去,需要使用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?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 : L'exigence est un paramètre de type String, (la valeur par défaut est l'adresse de la page actuelle) l'adresse à laquelle la demande est envoyée.

type : le paramètre doit être de type String et la méthode de requête (post ou get) est par défaut get. Notez les autres méthodes de requête http telles que put et

supprimer peut également être utilisé, mais seuls certains navigateurs le prennent en charge.

timeout : Il doit s'agir d'un paramètre de type Nombre, définissez le délai d'expiration de la requête (millisecondes). Ce paramètre remplacera le paramètre global de la méthode $.ajaxSetup()

Prêt.

async : nécessite des paramètres de type booléen. Le paramètre par défaut est vrai. Toutes les requêtes sont des requêtes asynchrones.

Définissez cette option sur false si vous devez envoyer des requêtes synchrones. Notez que les requêtes synchrones verrouilleront le navigateur et l'utilisateur devra attendre d'autres opérations

Il ne peut être exécuté qu'une fois la demande terminée.

cache : nécessite des paramètres de type booléen, la valeur par défaut est true (lorsque dataType est script, la valeur par défaut est false).

Le réglage sur false ne chargera pas les informations de demande à partir du cache du navigateur.

données : Nécessite des paramètres de type Objet ou Chaîne, données envoyées au serveur. Si ce n'est pas une chaîne, elle sera automatiquement convertie en format chaîne

Formule. La demande d'obtention sera ajoutée à l'URL. Pour empêcher cette conversion automatique, cochez l'option processData. L'objet doit être au format clé/valeur

formule, par exemple, {foo1:"bar1",foo2:"bar2"} est convertie en &foo1=bar1&foo2=bar2. S'il s'agit d'un tableau, JQuery sera automatiquement différent

Les valeurs correspondent au même nom. Par exemple, {foo:["bar1","bar2"]} est converti en &foo=bar1&foo=bar2.

dataType : paramètres devant être de type String, le type de données qui devrait être renvoyé par le serveur. S'il n'est pas spécifié, JQuery basera automatiquement le package http sur mime

Les informations sont renvoyées sous forme de réponseXML ou de réponseText et transmises en tant que paramètre de fonction de rappel.

Les types disponibles sont les suivants :

xml : renvoie un document XML pouvant être traité avec JQuery.

html : renvoie les informations HTML en texte brut ; la balise de script incluse sera exécutée une fois insérée dans le DOM.

script : renvoie le code JavaScript en texte brut. Les résultats ne sont pas automatiquement mis en cache. Sauf si les paramètres du cache sont définis. Notez que dans les requêtes à distance

(pas sous le même domaine), toutes les demandes de publication seront converties en demandes d'obtention.

json : renvoie les données JSON.

jsonp : format JSONP. Lors de l'appel d'une fonction à l'aide du formulaire SONP, tel que myurl?callback=?, JQuery remplacera automatiquement le dernier

"?" est le nom de fonction correct pour exécuter la fonction de rappel.

text : renvoie une chaîne de texte brut.

beforeSend : le paramètre doit être de type Function. Vous pouvez modifier la fonction de l'objet XMLHttpRequest avant d'envoyer la requête, par exemple en ajoutant un

personnalisé.

En-tête HTTP. Si false est renvoyé dans beforeSend, cette requête ajax peut être annulée. L'objet XMLHttpRequest est le seul paramètre

Numéro.

fonction(XMLHttpRequest){

this; //Les paramètres d'options transmis lors de l'appel de cette requête ajax

}

complete : le paramètre doit être de type Function et la fonction de rappel est appelée une fois la requête terminée (appelée lorsque la requête réussit ou échoue).

Paramètres : objet XMLHttpRequest et une chaîne décrivant le type de requête réussie.

fonction(XMLHttpRequest, textStatus){

this; //Les paramètres d'options transmis lors de l'appel de cette requête ajax

}

Succès : le paramètre doit être de type Fonction. La fonction de rappel appelée une fois la requête réussie a deux paramètres.

(1) Données renvoyées par le serveur et traitées selon le paramètre dataType.

(2) Une chaîne décrivant le statut.

fonction (données, texteStatus){

//les données peuvent être xmlDoc, jsonObj, html, texte, etc.

this; //Les paramètres d'options transmis lors de l'appel de cette requête ajax

erreur : le paramètre doit être de type Fonction et la fonction est appelée lorsque la requête échoue. Cette fonction a 3 paramètres, à savoir l'objet XMLHttpRequest, erreur

Message d'erreur, objet d'erreur capturé (facultatif).

La fonction de l'événement ajax est la suivante :

fonction (XMLHttpRequest, textStatus, errorThrown){

//Normalement, un seul parmi textStatus et errorThrown contient des informations

this; //Les paramètres d'options transmis lors de l'appel de cette requête ajax

}

contentType : nécessite un paramètre de type String Lors de l'envoi d'informations au serveur, le type d'encodage du contenu est par défaut

.

est "application/x-www-form-urlencoded". Cette valeur par défaut convient à la plupart des applications.

dataFilter : nécessite des paramètres de type Function, une fonction qui prétraite les données originales renvoyées par Ajax.

Fournissez deux paramètres : les données et le type. data sont les données originales renvoyées par Ajax, et le type est fourni lors de l'appel de jQuery.ajax

paramètre dataType. La valeur renvoyée par la fonction sera ensuite traitée par jQuery.

fonction (données, type){

//Renvoyer les données traitées

retourner les données ;

}

global : nécessite des paramètres de type booléen, la valeur par défaut est true. Indique s’il faut déclencher l’événement ajax global. La définition sur false ne déclenchera pas le

global

L'événement ajax, ajaxStart ou ajaxStop peut être utilisé pour contrôler divers événements ajax.

ifModified : nécessite un paramètre de type booléen, la valeur par défaut est false. Obtenez de nouvelles données uniquement lorsque les données du serveur changent.

La base pour juger des modifications des données du serveur est les informations d'en-tête Last-Modified. La valeur par défaut est false, ce qui signifie que les informations d'en-tête sont ignorées.

jsonp : nécessite des paramètres de type String, réécrit le nom de la fonction de rappel dans une requête 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)就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持脚本之家。