Häufig verwendete Ajax-Funktionen-js-Tutorial-php.cn

Häufig verwendete Ajax-Funktionen

巴扎黑

Freigeben： 2017-07-18 16:37:37

Original

1635 Leute haben es durchsucht

AJAX ist eine Technologie, die einen Teil einer Webseite aktualisieren kann, ohne die gesamte Webseite neu laden zu müssen.

Was ist AJAX?

AJAX = Asynchrones JavaScript und XML.

AJAX ist eine Technologie zur Erstellung schneller, dynamischer Webseiten.

AJAX ermöglicht die asynchrone Aktualisierung von Webseiten durch den Austausch einer kleinen Datenmenge mit dem Server im Hintergrund. Das bedeutet, dass Teile einer Webseite aktualisiert werden können, ohne dass die gesamte Seite neu geladen werden muss.

Wenn bei herkömmlichen Webseiten (die kein AJAX verwenden) der Inhalt aktualisiert werden muss, muss die gesamte Webseite neu geladen werden.

Es gibt viele Anwendungsfälle, die AJAX verwenden: Sina Weibo, Google Maps, Kaixin.com usw.

2: Traditionelles Ajax ist zu umständlich. Jquer kapselt einige einfache Funktionen, die häufig in Ajax verwendet werden.

a: $.ajax() Methode:

JSP-Seitencode:

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

Nach dem Login kopieren

Servlet-Hintergrundcode:

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

Nach dem Login kopieren

b: Die Methoden $.get(), $.post() und $.getJson sind alle optimierte Versionen von $.ajax() Methode ist die Verwendung ungefähr gleich, bis auf einen Typ weniger

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

Nach dem Login kopieren

c: $.load()

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

Nach dem Login kopieren

d:$(

selector

).serializeArray() und $(selector).serialize( ) //Diese Methode kann den Namensattributwert des Formularformulars direkt als Datenparameter abrufen

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

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

Nach dem Login kopieren

e: As der Datenparameter

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

Nach dem Login kopieren

4 gängige Anforderungsmethoden von Ajax in jQuery:

1.$.ajax() gibt das von ihm erstellte XMLHttpRequest-Objekt zurück.

$.ajax() hat nur einen Parameter: Parameterschlüssel/Wertobjekt, einschließlich aller Konfigurations- und Rückruffunktionsinformationen. Wenn die dataType-Option angegeben ist, stellen Sie sicher, dass der Server die richtigen MIME-Informationen zurückgibt (z. B. gibt XML „text/xml“ zurück).
Beispiel:
Daten auf dem Server speichern und bei Erfolg Informationen anzeigen.
$.ajax({ type: "post", dataType: "html", url: '/Resources/GetList.ashx', data: dataurl, success: function (data) 　{
if (data != "") {
$("#pager").pager({
pagenumber: pagenumber, pagecount: data.split("$$")[1],
buttonClickCallback: PageClick });
$("#anhtml").html(data.split("$$")[0]);
}
}
});
2. Durch Remote-HTTP-GET-Anfrage Informationen laden.
Dies ist eine einfache GET-Anfragefunktion zum Ersetzen der komplexen $.ajax. Die Callback-Funktion
kann aufgerufen werden, wenn die Anfrage erfolgreich ist. Wenn Sie eine Funktion im Fehlerfall ausführen müssen, verwenden Sie $.ajax. Beispiel:
$.get("test.cgi", { name: "John", time: "2pm" },
function(data){
alert("Data Loaded: " + data) ;
});
3. Laden Sie Informationen über eine Remote-HTTP-POST-Anfrage. Dies ist eine einfache POST-Anfragefunktion zum Ersetzen der komplexen $.ajax .
Die Rückruffunktion kann aufgerufen werden, wenn die Anfrage erfolgreich ist. Wenn Sie eine Funktion im Fehlerfall ausführen müssen, verwenden Sie $.ajax.
Beispiel:
$.post("/Resources/addfriend.ashx", { "fid": fids, "fname": fnames, "tuid": tuids, "tuname": tunames },
function (data) {
if (data == "ok") {
alert("Hinzugefügt erfolgreich!");
}
}
)
Über HTTP GET Anfrage zum Laden von JSON-Daten.
Beispiel:
$.getJSON("api.flickr.com/services/feeds/photos_public.gne?tags=cat&tagmode=any&format=json&
jsoncallback=?, fügen Sie http://" vor, function(data){
$.each(data.items, function(i,item){
$("").attr("src", item.media.m) .appendTo("#images");
if ( i == 3 ) return false;
});
});

　

Das obige ist der detaillierte Inhalt vonHäufig verwendete Ajax-Funktionen. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!