Maison >interface Web >js tutoriel >Fonctions Ajax couramment utilisées

Fonctions Ajax couramment utilisées

巴扎黑original: 2017-07-18 16:37:371636parcourir

1 :

AJAX est une technologie qui permet de mettre à jour une partie d'une page Web sans recharger la page Web entière.

Qu'est-ce qu'AJAX ?

AJAX = JavaScript et XML asynchrones.

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.

Pour les pages web traditionnelles (n'utilisant pas AJAX), si le contenu doit être mis à jour, la page web entière doit être rechargée.

Il existe de nombreux cas d'application utilisant AJAX : Sina Weibo, Google Maps, Kaixin.com, etc.

2 : L'Ajax traditionnel est trop lourd. jquer encapsule certaines fonctions simples couramment utilisées en ajax.

a : méthode $.ajax() :

code de la page jsp :

<head><title>Ajax验证</title><script type="text/javascript" src="js/jquery-1.8.3.min.js?1.1.11"></script><script type="text/javascript">$(function () {
            $("[name='userName']").blur(function () {         
                $.ajax({
                    type: "post",
                    url: "/TestServlet",
                    data:{action:"login"},         //data 传递的参数一般都是key：“ value” 类型的  value一定要加引号  我亲身体验  那种找不到错的感觉// dataType:'Text',            //servers 返回的格式  也可以是gjon                    success: function (data) {if (data == "success") {
                            alert(data);
                            $("#myspan").html(data);
                        }
                    },
                    error: function () {           //这个用的比较少                    }
                })
            })
        })</script></head><body> 姓名： <input  name="userName" type="text"><span id="myspan"></span> 密码: <input name="password" type="text"></body>

code d'arrière-plan du servlet :

public class TestServlet extends HttpServlet {protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        String name = request.getParameter("action");
        System.out.println(name);if(name.equals("login")){
            response.getWriter().write("success");   //返回回掉函数的参数
        }else{
            response.getWriter().write("file");
        }
    }

b : $.get(), $.post() et $.getJson sont toutes des versions simplifiées de $.ajax() méthode , l'utilisation est à peu près la même, à l'exception d'un type de moins

$.post("/TestServlet",
                  {"uname":$('[name=uname]').val()},
                  function (data) {
                      alert(data);
                  });

c: $.load()

 $("#msg").load(           "/TestServlet","action="+$('[name="userName"]'

d:$(

sélecteur

).serializeArray() et $(sélecteur).serialize( ) //Cette méthode peut obtenir directement la valeur de l'attribut nom du formulaire en tant que paramètre de données

 var data1 = $("#form1").serializeArray(); //自动将form表单封装成json                     $.each(data1,function (i,dom) {
                         alert(dom.name+"\r\n"+dom.value);
                     });

                     var data2=$("#form1").serialize();
                     alert(data2);

e : Comme le paramètre data

 var data2=$("#form1").serialize();
                     $.getJSON("/TestServlet",data2, function (data) {
                            alert(data);
                     });

4 méthodes de requête courantes d'ajax dans jQuery :

1.$.ajax() renvoie l'objet XMLHttpRequest qu'il a créé.

$.ajax() n'a qu'un seul paramètre : le paramètre clé/valeur de l'objet, comprenant chaque information de configuration et de fonction de rappel. Si l'option dataType est spécifiée, assurez-vous que le serveur renvoie les informations MIME correctes (par exemple, xml renvoie "text/xml").
Exemple :
Enregistrez les données sur le serveur et affichez les informations en cas de succès.
$.ajax({ type : "post", dataType : "html", url : '/Resources/GetList.ashx', data : dataurl, success : function (data) 　{
if (data != "") {
$("#pager").pager({
numéro de page : numéro de page, nombre de pages : data.split("$$")[1],
buttonClickCallback : PageClick });
$("#anhtml").html(data.split("$$")[0]);
}
}
});
Par requête HTTP GET à distance. Charger les informations.
Il s'agit d'une simple fonction de requête GET pour remplacer le complexe $.ajax. La fonction de rappel
peut être appelée lorsque la requête aboutit. Si vous devez exécuter une fonction en cas d'erreur, utilisez $.ajax. Exemple :
$.get("test.cgi", { nom : "John", heure : "14h00" },
function(data){
alert("Données chargées : " + données) ;
});
3. Charger les informations via une requête HTTP POST à distance. Il s'agit d'une simple fonction de requête POST pour remplacer le complexe $.ajax .
La fonction de rappel peut être appelée lorsque la demande aboutit. Si vous devez exécuter une fonction en cas d'erreur, utilisez $.ajax.
Exemple :
$.post("/Resources/addfriend.ashx", { "fid": fids, "fname": fnames, "tuid": tuids, "tuname": tunames },
function (data) {
if (data == "ok") {
alert("Ajouté avec succès !");
}
}
)
Via HTTP GET Demande de chargement de données JSON.
Exemple :
$.getJSON("api.flickr.com/services/feeds/photos_public.gne?tags=cat&tagmode=any&format=json&
jsoncallback=?, ajoutez http://" devant, function(data){
$.each(data.items, function(i,item){
$("").attr("src", item.media.m) .appendTo("#images");
if ( i == 3 ) return false;
});
});

　

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

Article précédent：Comment utiliser le contrôle du temps dans bootstrapArticle suivant：Comment utiliser le contrôle du temps dans bootstrap

Articles Liés

Voir plus