Wie JQuery Ajax-Anfragen implementiert

Die Methode von jquery zur Implementierung einer Ajax-Anfrage: 1. Methode „$.ajax()“ 2. Methode „$.post()“, Code ist „$.post(url, data, func, dataType);“ ; 3, „$.get()“-Methode, der Code ist „$.get(url, data, func, dataType);“ 4. „$.getJSON()“-Methode usw.

Das Betriebssystem dieses Tutorials: Windows 10-System, jQuery Version 3.6.0, Dell G3-Computer.

jquery implementiert Ajax-Anfragen

Ajax wird für die Kommunikation zwischen dem Browser und dem Server verwendet, ohne die gesamte Seite zu aktualisieren. Der Server gibt nicht mehr die gesamte Seite zurück, sondern gibt einen Teil der Daten zurück und aktualisiert die Knoten durch DOM-Operationen in JavaScript. Zu den Datenübertragungsformaten gehören XML, JSON und andere Formate, aber das am häufigsten verwendete Format ist JSON.
Wir können das JavaScript-Objekt XMLHttpRequest verwenden, um natives Ajax zu implementieren, aber diese Methode ist komplizierter und schwieriger zu schreiben. jQuery hat Ajax gekapselt, was das Initiieren von Ajax-Anfragen erleichtert:

1 Führen Sie die Datei jquery.js im -Tag ein gängige jQuery-Ajax-Methode

(1) $.ajax()

①URL: Linkadresse, String-Darstellung

②Daten: (optional) Die an den Server zu sendenden Daten, sowohl GET als auch POST, werden automatisch in konvertiert Ein Anforderungszeichenfolgenformat, ausgedrückt in Form von Schlüssel/Wert-Paaren, wird als QueryString an die Anforderungs-URL angehängt. Das Format ist {A: '...', B: '...'} ③Typ: „POST " oder „GET", Anforderungstyp ④timeout: Anforderungszeitlimit, Einheit ist Millisekunde, numerischer Wert
⑤cache: ob das Anforderungsergebnis zwischengespeichert werden soll, bool bedeutet
⑥contentType: Inhaltstyp, der Standardwert ist „application/x-www-form- urlencoded"
⑦dataType: Server-Antwort Der Datentyp, dargestellt durch eine Zeichenfolge; wenn er als JSON ausgefüllt wird, besteht keine Notwendigkeit, die Daten in der Rückruffunktion in JSON zu deserialisieren
⑧success: Die Funktion, die nach der Anforderung vom Server zurückgerufen wird erfolgreich
⑨error: Die Funktion, die vom Server zurückgerufen wird, nachdem die Anforderung fehlgeschlagen ist
⑩complete: Die Funktion, die nach Abschluss der Anforderung aufgerufen wird. Unabhängig davon, ob die Anforderung erfolgreich ist oder fehlgeschlagen ist, wird diese Funktion aufgerufen, wenn die Erfolgs- und Fehlerfunktionen festgelegt sind. Die Funktion wird danach aufgerufen
⑪async: Ob asynchron verarbeitet werden soll, bool bedeutet, dass der Standardwert „true“ ist. Nachdem dieser Wert auf „false“ gesetzt wurde, wird JS nicht nach unten ausgeführt, sondern wartet darauf, dass der Server Daten zurückgibt und den entsprechenden Rückruf abschließt Funktion vor der Ausführung nach unten
⑫Benutzername: Der in der Zugriffsauthentifizierungsanforderung enthaltene Benutzername, dargestellt durch eine Zeichenfolge
⑬Passwort: Gibt das in der Authentifizierungsanforderung enthaltene Kennwort zurück, eine Zeichenfolgendarstellung

 <script src="https://code.jquery.com/jquery-3.6.1.js"></script>

 <script type="text/javascript">
        function login1(){
            $.ajax({
                //${pageContext.request.contextPath}用于取后端方法的绝对路径的项目名
                url: "${pageContext.request.contextPath}/user/returnJson",
                type: "GET",
                data:'{name: 'James'}', //必须是字符串格式
                contentType:"application/json", //指定内容格式
                dataType:json,
                success: function(data) {  //括号里的data是服务器返回的数据
                    console.log(data);
                    document.getElementById("myDiv").innerText=data["name"];
                }
            });
        }
    </script>

(2) $.post()

Verwenden Sie die POST-Methode, um eine Ajax-Anfrage auszuführen und Daten vom Server zu laden. Format: $.post(url, data, func, dataType); Optionale Parameter:

①url: Linkadresse, String-Darstellung

②data: Daten, die an den Server gesendet werden müssen, im Format {A: '.. .‘, B: ‚…‘}
③func: Die vom Server zurückgerufene Funktion, nachdem die Anfrage erfolgreich war; function(data, status, xhr), wobei data die vom Server zurückgegebenen Daten sind, status der Antwortstatus ist, und xhr ist das XMLHttpRequest-Objekt. Ich persönlich achte auf den Datenparameter. Das ist es
④dataType: Das Format der vom Server zurückgegebenen Daten

<script>
    $('#btn1').click(function () {
        $.ajax({
            type:"post",	//提交方式
            url:'${pageContext.request.contextPath}/JSONServlet',
            data:{
                bookname:  $("#bookname").val()//val() 方法返回或设置被选元素的值。
            },
            dataType: "json",   	//返回数据的格式
            success:function (responseData) {
                var html = "";
                $('#dataTable tr:not(:first)').remove(); //删除第一行之外的所有行
                // $('#dataTable > tbody > tr').remove();   // 删除所有行，表头会被删除
                console.log(responseData);
                for (var i = 0; i < responseData.length; i++) {
                    html += &#39;<tr>';
                    html += '<td>'+responseData[i].bookid+'</td>'+'<td>'+responseData[i].bookname+'</td>'+'<td>'+responseData[i].price+'</td>'
                    html += '</tr>';
                }
                $('#dataTable').append(html);
            },
        });
    });
</script>

(3) $.get()

Verwenden Sie die GET-Methode zum Ausführen Ajax fordert Daten vom Server an und lädt sie. Form: $.get(url, data, func, dataType);

<script type="text/javascript">
        function login2(){
            $.post(
                "${pageContext.request.contextPath}/user/returnJson",
                 '{name: 'James'}',
                  "application/json",
                 function(data) {
                    console.log(data);
                    document.getElementById("myDiv").innerText=data["name"];
                }
            );
        }
    </script>

(4)$.getJSON()

Form: $.getJSON(url, data, func); Verwenden Sie die GET-Methode zum Ausführen Ajax-Anfrage zum Laden von Daten im JSON-Format vom Server.

<script type="text/javascript">
        function login3(){
            $.get(
                "${pageContext.request.contextPath}/user/returnJson",
                function(data) {
                    console.log(data);
                    document.getElementById("myDiv").innerText=data["name"];
                }
            );
        }
    </script>

Hinweis: Da das vom Server zurückgegebene Datenformat als JSON festgelegt ist, muss in dieser Methode kein dataType angegeben werden.

(5)$.load()

Fügen Sie die vom Server geladenen Daten direkt in einen Knoten im angegebenen DOM ein. Format: $.load(url, data, func); Wenn Daten vorhanden sind, verwenden Sie die POST-Methode, um die Anfrage zu senden; wenn sie nicht vorhanden sind, verwenden Sie die GET-Methode, um die Anfrage zu senden.

<script type="text/javascript">
        function login4(){
            $.getJSON(
                "${pageContext.request.contextPath}/user/returnJson",
                function(data) {
                    console.log(data);
                    document.getElementById("myDiv").innerText=data["name"];
                }
            );
        }
    </script>

Das obige ist der detaillierte Inhalt vonWie JQuery Ajax-Anfragen implementiert. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!