Heim > Artikel > Web-Frontend > Häufig verwendete Ajax-Funktionen

Häufig verwendete Ajax-Funktionen

巴扎黑Original: 2017-07-18 16:37:371617Durchsuche

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>

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

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

c: $.load()

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

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

e: As der Datenparameter

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

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!

Stellungnahme：

Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn

Vorheriger Artikel：So verwenden Sie die Zeitsteuerung im BootstrapNächster Artikel：So verwenden Sie die Zeitsteuerung im Bootstrap

In Verbindung stehende Artikel

Mehr sehen