Fonctions liées...LOGIN

Fonctions liées à Ajax

Fonctions liées à Ajax

jQuery fournit certaines fonctions associées pour assister les fonctions Ajax.

1. jQuery.ajaxSetup( options )

Aucune valeur de retour

Description :

Paramètres Options des options globales par défaut d'AJAX.

Explication :

Parfois, nous souhaitons définir le comportement par défaut de tous les attributs Ajax sur la page. Vous pouvez ensuite utiliser cette fonction pour définir les options, puis les options par défaut de toutes les requêtes Ajax. sera changé.

Par exemple, lorsque la page se charge, j'utilise le code suivant pour définir l'option par défaut d'Ajax :

$.ajaxSetup({    url: "../data/AjaxGetMethod.aspx",    data: { "param": "ziqiu.zhang" },    global: false,    type: "POST",    success: function(data, textStatus) { $("#divResult").html(data); }});
此后我们可以使用无参数的get(),post()或者ajax()方法发送 ajax 请求.完整的示例代码如下:
<!doctype html><html><head>
 <meta charset="utf-8"/>
 <title>jQuery Ajax - Load</title>
 <script src="http://code.jquery.com/jquery-3.1.1.min.js"></script>
 <script>
   $(document).ready(function() {
     $.ajaxSetup({
         url: "../data/AjaxGetMethod.aspx",
         data: { "param": "ziqiu.zhang" },
         global: false,
         type: "POST",
         success: function(data, textStatus) {
           $("#divResult").html(data);
         }
     });
     $("#btnAjax").click(function(event) { $.ajax(); });
     $("#btnGet").click(function(event) { $.get(); });
     $("#btnPost").click(function(event) { $.post(); });
     $("#btnGet2").click(function(event) { $.get("../data/AjaxGetMethod.aspx",{ "param": "other" }); });
   });  </script></head>  <body>    
 <button id="btnAjax">nontransfer param call ajax() method</button><br />
 <button id="btnGet">nontransfer param call get() method</button><br />
 <button id="btnPost">nontransfer param call post() method</button><br />
 <button id="btnGet2">transfer param call get() method , use global default callback</button><br />
 <br />
 <div id="divResult"></div>
</body>
</html>

Notez que lorsque vous utilisez la méthode get() ou post(), à l'exception de la Le paramètre type sera réinitialisé À l'exception de GET ou POST, les autres paramètres utiliseront l'option globale par défaut tant qu'ils ne seront pas transmis. Si une certaine option est passée, par exemple, le dernier bouton transmet l'URL et les paramètres, alors cet appel sera basé sur l'option passée. Les options qui ne sont pas transmises, telles que les fonctions de rappel, utiliseront toujours l'option globale pour définir la valeur.

2.serialize( )

Retours : Chaîne

Description :

Contenu de la table de séquence Est une chaîne utilisée pour les requêtes Ajax.

La sérialisation est le plus souvent utilisée lors de l'envoi de données de formulaire au serveur. Les données sérialisées sont dans un format standard et peuvent être prises en charge par presque tous les serveurs.

Afin de fonctionner le mieux possible, les champs du formulaire en cours de sérialisation doivent avoir des attributs de nom. Un seul eid ne fonctionnera pas.

Écrivez l'attribut name comme ceci : <input id="email" name="email" type="text" />

Explication :

serialize( ) La fonction concatène les objets du formulaire du formulaire à envoyer au serveur dans une chaîne. Cela nous permet d'obtenir plus facilement les données du formulaire lors de l'envoi en utilisant Ajax. Ceci est similaire à lorsqu'un formulaire est soumis via la méthode Get, le nom/la valeur de l'objet du formulaire est automatiquement placé sur l'URL pour la soumission.

3.serializeArray()

Renvoie : Array<Objet>

Instructions :

Utiliser Cette fonction obtient un objet JSON, mais jQuery ne fournit pas de méthode pour convertir un objet JSON en chaîne JSON. Par conséquent, vous devez utiliser des plug-ins, tels que le plug-in jquery.json mentionné dans l'article d'origine


section suivante
<html> <head> <script src="http://code.jquery.com/jquery-3.1.1.min.js"></script> <script type="text/javascript"> $(document).ready(function(){ $("button").click(function(){ $("div").text($("form").serialize()); }); }); </script> </head> <body> <form action=""> 姓名: <input type="text" name="FirstName" value="Bill" /><br /> 职位: <input type="text" name="LastName" value="Gates" /><br /> </form> <button>序列化表单值</button> <div></div> </body> </html>
soumettreRéinitialiser le code
chapitredidacticiel