Fonctions Ajax couramment utilisées-js tutoriel-php.cn

Fonctions Ajax couramment utilisées

巴扎黑

Libérer： 2017-07-18 16:37:37

original

1616 Les gens l'ont consulté

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>

Copier après la connexion

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");
        }
    }

Copier après la connexion

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);
                  });

Copier après la connexion

c: $.load()

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

Copier après la connexion

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);

Copier après la connexion

e : Comme le paramètre data

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

Copier après la connexion

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;
});
});

　