Maison >interface Web >js tutoriel >Partager les étapes pour implémenter l'encapsulation Ajax à l'aide de jQuery

Partager les étapes pour implémenter l'encapsulation Ajax à l'aide de jQuery

零到壹度
零到壹度original
2018-04-09 15:57:101391parcourir

Le contenu de cet article est de partager les étapes d'utilisation de jQuery pour implémenter l'encapsulation Ajax. Il a une certaine valeur de référence. Les amis dans le besoin peuvent s'y référer

charger. méthode

  • load(url,[data],[callback]). data sont les données soumises, le rappel est la fonction de rappel, la fonction de rappel peut transmettre trois paramètres, la réponse stutas xhr, le premier paramètre est le contenu renvoyé par le serveur, le deuxième paramètre est le succès ou l'erreur de l'état de la réponse, le troisième paramètre Il est l'objet XMLHttpRequest

  • $('#box').load(url) dans le js sous-jacent. Le contenu obtenu à partir de l'adresse cible peut être directement chargé et renseigné quelque part sur la page actuelle.

Le type de méthode globale get()

  • $.get(url,[data],[callback],type) représente le contenu renvoyé Format, si le format d'origine n'est pas défini, la conversion forcée peut échouer.

Méthode globale post()

  • $.post(url, [données],[rappel]).

Méthode globale getJSON()

  • $.getJSON()(url,[data],[callback]).

  • Utilisé pour charger des fichiers json dans des circonstances spécifiques

Méthode globale getSCRIPT()

  • $ .getSCRIPT()(url,[données],[rappel]).

  • est utilisé pour charger des fichiers js dans des circonstances spécifiques. Généralement non utilisé.

Méthode globale ajax()

  • Seule la méthode ajax() ne transmet qu'un seul paramètre, qui est un objet contenant plusieurs paires clé-valeur .

  • Formats les plus couramment utilisés :

$.ajax({
  url:, //请求的地址
  type:, //请求的方式'GET'或'POST'
  data:{
        },  //提交的信息
  dataType: 'json',//设置返回内容的数据类型
  timeout:  ,//设置超时,请求超过了这个时间值就会结束请求
  global: ,//设置是否触发全局事件,true或false
  error: function(xhr,errorText,errorType){//响应失败时执行的错误处理函数,会传三个参数,xhr对象,错误信息,错误类型
       }
  success:function(response,stutas,xhr){//响应成功后执行的回调函数
     console.log(response);
      },
  beforeSend : function(){//请求开始之前触发该事件},
complete : function(){//请求结束之后触发该事件}
})

Sérialisation des formulaires

  • Méthode générale de soumission des données : Supposons que les données soumises sont le nom d'utilisateur et l'adresse e-mail sous la forme

  • data:{ user:document.getElementById(‘user’), 
    emall:document.getElementById(‘emall’)//用dom方法或其他方法只要能获取到数据都行 
     }
  • Sérialisation du formulaire :
    données : $( 'form ').serialize(),//Après la sérialisation, la paire clé-valeur des données est obtenue sous la forme d'une chaîne et l'URL est codée. L'objet de la fonction serialize() peut être le formulaire entier ou un élément de formulaire, mais il ne peut s'agir que d'un objet jQuery.

  • Méthode param()
    La méthode $.param() est le cœur de la méthode Serialize(), qui est utilisée pour sérialiser un tableau ou un objet en fonction de la clé/valeur.
    Pour la première méthode de soumission consistant à transmettre directement un objet, vous pouvez utiliser cette fonction pour sérialiser l'objet entier.

data:$ .param({   
  user:document.getElementById('user'),
     emall:document.getElementById('emall')
    } )
  • Méthode SerializeArray()
    La méthode SerializeArray sérialise chaque champ d'un formulaire dans un tableau au format json.

Demande de chargement

 jQuery提供两个全局事件。.ajaxStart和.ajaxStop。Ajax请求开始时会触发开始事件,请求结束时会触发结束事件。
$(document).ajaxStart(function(){
     //请求开始时触发的行为
        }).ajaxStop(function(){
     //请求结束时触发的行为})

Objet jQuery xhr

L'objet jqXHR est l'objet renvoyé par la méthode $.ajax(), c'est un surensemble d'objets jsXHR.

var jqXHR = $.ajax(      
      url:, //请求的地址            
      type:, //请求的方式'GET'或'POST'
      data:{
                      },  //提交的信息
             );

L'objet jqXHR fournit de nombreuses nouvelles propriétés et méthodes, et prend en charge l'écriture de manière concaténée. La même fonction de rappel peut être exécutée plusieurs fois sans être écrasée.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!

Déclaration:
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