Comment utiliser les paramètres de la méthode $.Ajax()

Cette fois, je vais vous montrer comment utiliser les paramètres de la méthode $.Ajax(), et quelles sont les précautions lors de l'utilisation de la méthode $.Ajax() Ce qui suit est un cas pratique. , jetons un coup d'oeil.

Permettez-moi d'abord de vous présenter le concept d'Ajax

AJAX est "Javascript et XML asynchrones" (Javascript et XML asynchrones), qui fait référence à des techniques de développement Web pour créer des applications Web interactives.

AJAX = JavaScript asynchrone et XML (un sous-ensemble du langage de balisage universel standard).

AJAX est une technologie permettant de créer des pages Web rapides et dynamiques.

AJAX permet de mettre à jour les pages Web de manière asynchrone en échangeant une petite quantité de données avec le serveur en arrière-plan. Cela signifie que certaines parties d'une page Web peuvent être mises à jour sans recharger la page entière.

Les pages Web traditionnelles (n'utilisant pas AJAX) doivent recharger la page Web entière si le contenu doit être mis à jour.

Méthode ajax

La méthode $.ajax() est l'implémentation Ajax de niveau le plus bas de jQuery. Sa structure est :

　$.ajax(options)

Cette méthode n'a qu'un seul paramètre, mais cet objet contient les paramètres de requête et les fonctions de rappel requis par la méthode $.ajax() Informations. et les paramètres existent sous forme de clé/valeur, et tous les paramètres sont facultatifs. Les paramètres couramment utilisés sont présentés dans le tableau ci-dessous :

1.url

nécessite un paramètre de type String (la valeur par défaut est l'adresse actuelle ) pour envoyer la page demandée.

2.type

nécessite des paramètres de type String et la méthode de requête (post ou get) est par défaut get. Notez que d'autres méthodes de requête http, telles que put et delete, peuvent également être utilisées, mais ne sont prises en charge que par certains navigateurs.

3.timeout

nécessite un paramètre de type Number et définit le délai d'expiration de la requête (millisecondes). Ce paramètre remplacera le paramètre global de la méthode $.ajaxSetup().

4.async

nécessite des paramètres de type booléen, qui sont définis sur true par défaut. Toutes les requêtes sont des requêtes asynchrones. Si des requêtes synchrones sont requises, définissez cette option sur false. Notez qu'une requête synchrone verrouillera le navigateur et que l'utilisateur devra attendre que la requête soit terminée avant de pouvoir effectuer d'autres opérations.

5.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), définissez false ne chargera pas les informations de demande à partir du cache du navigateur.

6.data

nécessite des paramètres de type Objet ou Chaîne, données envoyées au serveur. S'il ne s'agit pas d'une chaîne, elle sera automatiquement convertie au format chaîne. La demande d'obtention sera ajoutée à l'URL. Pour empêcher cette conversion automatique, vous pouvez afficher l'option processData. L'objet doit être au format clé/valeur, par exemple {foo1:"bar1",foo2:"bar2"} est converti en &foo1=bar1&foo2=bar2. S'il s'agit d'un tableau, JQuery attribuera automatiquement le même nom à différentes valeurs. Par exemple, {foo:["bar1","bar2"]} est converti en &foo=bar1&foo=bar2.

7.dataType

nécessite des paramètres de type String, et le type de données renvoyé par le serveur est attendu. S'il n'est pas spécifié, jQuery renverra automatiquement ResponseXML ou ResponseText en fonction des informations minières du package HTTP et les transmettra 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 le paramètre cache est défini. Notez que lors de requêtes distantes (pas sous le même domaine), toutes les requêtes de publication seront converties en requêtes get.

json : renvoie les données JSON.

jsonp : format JSON. Lors de l'appel d'une fonction au format JSONP, tel que myurl?callback=?, JQuery remplacera automatiquement le dernier "?" par le nom de fonction correct pour exécuter la fonction de rappel.

Texte : renvoie une chaîne de texte brut.

8.beforeSend

nécessite des paramètres de type Function Vous pouvez modifier la fonction de l'objet XMLHttpRequest avant d'envoyer la requête, par exemple en ajoutant un HTTP personnalisé. en-tête. Si false est renvoyé dans beforeSend, cette requête ajax peut être annulée. L'objet XMLHttpRequest est le seul paramètre.

function(XMLHttpRequest){
　　　　this;//调用本次ajax请求时传递的options参数
　　}

9.complete

nécessite un paramètre de type Function, une fonction de rappel qui est appelée une fois la requête terminée (que ce soit la demande réussit ou échoue) appel). Paramètres : objet XMLHttpRequest et une chaîne décrivant le type de requête réussie.

　　function(XMLHttpRequest,textStatus){
　　　　this; //调用本次ajax请求时传递的options参数
　　}

10.success

nécessite des paramètres de type Function 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.

　　function(data,textStatus){
　　　　//data可能是xmlDoc、jsonObj、html、text等
　　　　this; //调用本次ajax请求时传递的options参数
　　}

11.error

nécessite un paramètre de type Function, une fonction qui est appelée lorsque la requête échoue. Cette fonction a trois paramètres, à savoir l'objet XMLHttpRequest, le message d'erreur et l'objet d'erreur capturé (facultatif). La fonction d'événement ajax est la suivante :

　　function(XMLHttpRequest,textStatus,errorThrown){
　　　　//通常情况下textStatus和errorThrown只有其中一个包含信息
　　　　this; //调用本次ajax请求时传递的options参数
　　}

12.contentType

nécessite des paramètres de type String lors de l'envoi d'informations au serveur. Le type de codage du contenu est par défaut « application/x-www-form-urlencoded ». Cette valeur par défaut convient à la plupart des applications.

13.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 : data et type. data est les données originales renvoyées par Ajax et type est le paramètre dataTYpe fourni lors de l'appel de jQuery.ajax. La valeur renvoyée par la fonction sera ensuite traitée par jQuery.

　　function(data,type){
　　　　//返回处理后的数据
　　　　return data;
　　}

14.global

nécessite un paramètre de type booléen et la valeur par défaut est vraie. Indique s’il faut déclencher l’événement ajax global. La définition sur false ne déclenchera pas d'événements ajax globaux, ajaxStart et ajaxStop peuvent être utilisés pour contrôler divers événements ajax.

15.ifModified

nécessite un paramètre de type booléen et la valeur par défaut est false. Obtenez de nouvelles données uniquement lorsque les données du serveur changent. La base pour déterminer les modifications des données du serveur est l'information 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.

16.jsonp

nécessite des paramètres de type String et réécrit le nom de la fonction de rappel dans une requête jsonp. Cette valeur est utilisée pour remplacer la partie "callback" du paramètre URL dans une requête GET ou POST telle que "callback=?". Par exemple, {jsonp:'onJsonPLoad'} entraînera la transmission de "onJsonPLoad=?". le serveur.

17.username

doit être un paramètre de type String, utilisé pour répondre à l'utilisateur de la demande d'authentification d'accès HTTP.

18.password

nécessite un paramètre de type String, qui est le mot de passe utilisé pour répondre à la demande d'authentification d'accès HTTP.

19.processData

nécessite un paramètre de type booléen et la valeur par défaut est vraie. Par défaut, les données envoyées seront converties en objets (techniquement pas en chaînes) pour correspondre au type de contenu par défaut « application/x-www-form-urlencoded ». Si vous souhaitez envoyer des informations sur l'arborescence DOM ou d'autres informations que vous ne souhaitez pas convertir, définissez-la sur false.

20.scriptCharset

nécessite des paramètres de type String Uniquement lorsque le type de données de la requête est "jsonp" ou "script", et tapez-le. sera utilisé pour forcer la modification du jeu de caractères (charset) uniquement lorsqu'il est GET. Généralement utilisé lorsque les encodages de contenu local et distant sont différents.

Code de cas :

$(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 += '<p class="comment"><h6>' + comment['username']
      + ':</h6><p class="para"&#39; + comment[&#39;content&#39;]
      + &#39;</p></p>';
    });
    $('#resText').html(html);
   }
  });
 });
});

Lien de connaissance :

1.Fonction $.each() : $. La fonction each() est différente de la méthode each() de l'objet jQuery. Il s'agit d'une fonction globale et n'exploite pas l'objet jQuery. Cette fonction reçoit deux paramètres, le premier paramètre est un tableau ou un objet et le deuxième paramètre est une fonction de rappel. La fonction de rappel a deux paramètres : le premier paramètre est l'index du tableau ou le membre de l'objet, et le deuxième paramètre est la variable ou le contenu correspondant.

　　$.each(data,function(commentIndex,comment){
  //doSomething;
 })

2、ajaxStart()与ajaxStop()：当Ajax请求开始时，会触发ajaxStart()方法的回调函数。当Ajax请求结束时，会触发ajaxStop()方法的回调函数。这些方法都是全局的方法，因此无论创建它们的代码位于何处，只要有Ajax请求发生时，就会触发它们。

有时候页面需要加载一些图片，可能速度回比较慢，如果在加载过程中，不给用户提供一些提示和反馈信息，很容易让用户误认为按钮单击无用，使用户对网站失去信息。

此时，我们就需要为网页添加一个提示信息，常用的提示信息是“加载中...”，代码如下：

<p id="loading">加载中...</p>

当Ajax请求开始时，将此元素显示，用来提示用户Ajax请求正在进行；当Ajax请求结束后，将此元素隐藏。代码如下：

$("#loading").ajaxStart(function(){
　　　　$(this).show();
　　}).ajaxStop(function(){
 $(this).hide();
 })

好了，下面再给大家分享一个案例代码：

$(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 += '<p class="comment"><h6>' + comment['username']
      + ':</h6><p class="para"&#39; + comment[&#39;content&#39;]
      + &#39;</p></p>';
    });
    $('#resText').html(html);
   }
  });
 });
});

end，代码到此结束。

相信看了本文案例你已经掌握了方法，更多精彩请关注php中文网其它相关文章！

推荐阅读：

ajax怎么实现网络请求的封装

Ajax和JavaScript使用的区别

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!