Maison > interface Web > js tutoriel > le corps du texte

Exemple d'utilisation de jQuery Ajax_jquery

WBOY
Libérer: 2016-05-16 16:03:46
original
1202 Les gens l'ont consulté

Jquery encapsule très bien la soumission asynchrone. Il est très gênant d'utiliser AJAX directement, ce qui simplifie grandement nos opérations sans tenir compte des différences entre les navigateurs.

$.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
});
Copier après la connexion

2. Description des paramètres de $.ajax

Description du paramètre
URL Obligatoire. Spécifie l'URL à laquelle la demande doit être envoyée.
les données sont facultatives. Valeur de mappage ou de chaîne. Spécifie les données à envoyer au serveur avec la requête.
success(data, textStatus, jqXHR) Facultatif. La fonction de rappel exécutée lorsque la demande réussit.
Type de données facultatif. Spécifie le type de données de la réponse attendue du serveur.
Le jugement intelligent est effectué par défaut (xml, json, script ou html).
3. Quelques points à noter à propos de $.ajax :

1. Il existe trois méthodes principales de données, l'épissage HTML, le tableau JSON, le formulaire sérialisé par Serialize();

2.$.ajax soumet le formulaire uniquement en mode texte. Si la soumission asynchrone contient , le téléchargement ne peut pas être transmis. Vous devez utiliser $.ajaxSubmit de jquery.form.js

.

4. Mon exemple d'application pratique de $.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);   
  } 
}); 

Copier après la connexion
Étiquettes associées:
source:php.cn
Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal