Heim Web-Frontend js-Tutorial Implementierungsmethoden für Ajax-Front-End- und Back-End-Interaktionen mithilfe von JSON

Implementierungsmethoden für Ajax-Front-End- und Back-End-Interaktionen mithilfe von JSON

Jan 22, 2018 pm 01:16 PM
ajax javascript json

In diesem Artikel werden hauptsächlich Beispiele für die JSON-Interaktion zwischen jQuery Ajax und dem Back-End vorgestellt Das Back-End gibt einen JSON an das Front-End zurück. Wenn Sie interessiert sind, können Sie mehr erfahren. Ich hoffe, es hilft allen.

Anforderungen:

Das Front-End überträgt JSON über jQuery Ajax an das Back-End, das Back-End empfängt den JSON, verarbeitet den JSON und das Back-End gibt a zurück json zum Frontend

So verwenden Sie das Servlet hier

1. Verwenden Sie die $.post-Methode

index.jsp-Seite


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<%@ page contentType="text/html; charset=UTF-8"%> 
<html> 
<head> 
<title></title> 
<script src="js/jquery-1.12.2.js"></script> 
<script language="JavaScript"> 
  function checkUserid() { 
    $.post(&#39;Ajax/CheckServlet&#39;,//url 
    { 
      userid : $("#userid").val(), 
      sex : "男" 
    }, function(data) { 
      var obj = eval(&#39;(&#39; + data + &#39;)&#39;); 
      alert(obj.success); 
    }); 
  } 
</script> 
</head> 
<body> 
  用户ID: 
  <input type="text" id="userid" name="userid"> <span id="msg"></span> 
  <br> <button onclick="checkUserid()">传输</button> 
</body> 
</html>
Nach dem Login kopieren

CheckServlet.Java-Code lautet wie folgt


package com.ajax; 
 
import java.io.IOException; 
import java.io.PrintWriter; 
 
import javax.servlet.ServletException; 
import javax.servlet.http.HttpServlet; 
import javax.servlet.http.HttpServletRequest; 
import javax.servlet.http.HttpServletResponse; 
 
public class CheckServlet extends HttpServlet { 
 
  public void doGet(HttpServletRequest request, HttpServletResponse response) 
      throws ServletException, IOException { 
    this.doPost(request, response); 
  } 
 
  public void doPost(HttpServletRequest request, HttpServletResponse response) 
      throws ServletException, IOException { 
    /*设置字符集为&#39;UTF-8&#39;*/ 
    request.setCharacterEncoding("UTF-8"); 
    response.setCharacterEncoding("UTF-8"); 
    String userid = request.getParameter("userid"); // 接收userid 
    String sex = request.getParameter("sex");//接收性别 
    System.out.println(userid); 
    System.out.println(sex); 
 
    //写返回的JSON 
    PrintWriter pw = response.getWriter(); 
    String json = "{&#39;success&#39;:&#39;成功&#39;,&#39;false&#39;:&#39;失败&#39;}"; 
    pw.print(json); 
    pw.flush(); 
    pw.close(); 
 
  } 
}
Nach dem Login kopieren

Da hier die Servlet-Methode verwendet wird, muss web.xml konfiguriert werden


<?xml version="1.0" encoding="UTF-8"?> 
<web-app xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" 
  xmlns="http://xmlns.jcp.org/xml/ns/javaee" 
  xsi:schemaLocation="http://xmlns.jcp.org/xml/ns/javaee http://xmlns.jcp.org/xml/ns/javaee/web-app_3_1.xsd" 
  id="WebApp_ID" version="3.1"> 
  <display-name>Ajax</display-name> 
 
  <servlet> 
    <servlet-name>CheckServlet</servlet-name> 
    <servlet-class>com.ajax.CheckServlet</servlet-class> 
  </servlet> 
  <servlet-mapping> 
    <servlet-name>CheckServlet</servlet-name> 
    <url-pattern>/Ajax/CheckServlet</url-pattern> 
  </servlet-mapping> 
</web-app>
Nach dem Login kopieren

Geben Sie eine ID auf der Seite ein, die im Hintergrund empfangen und gedruckt werden kann. Der Hintergrund verwendet PrintWriter, um JSON zurückzuschreiben und an das Frontend zurückzugeben . Das Frontend verwendet eval, um JSON in ein Objektobjekt umzuwandeln und erhält den JSON-Wert über

2. Verwenden Sie die Methode $.get, ändern Sie einfach den Beitrag auf der JSP-Seite 🎜>


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<%@ page contentType="text/html; charset=UTF-8"%> 
<html> 
<head> 
<title></title> 
<script src="js/jquery-1.12.2.js"></script> 
<script language="JavaScript"> 
  function checkUserid() { 
    $.get( 
      &#39;Ajax/CheckServlet&#39;,//url 
      { 
        userid:$("#userid").val(), 
        sex:"男" 
      }, 
      function(data){ 
        var obj = eval(&#39;(&#39;+data+&#39;)&#39;); 
        alert(obj.success); 
      } 
    ); 
  } 
</script> 
</head> 
<body> 
 
  用户ID: 
  <input type="text" id="userid" name="userid"> <span id="msg"></span> 
    <br> 
      <button onclick="checkUserid()">传输</button> 
</body> 
</html>
Nach dem Login kopieren
Das Ergebnis ist das Gleiche wie $.post

3. Durch die $.ajax-Methode


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<%@ page contentType="text/html; charset=UTF-8"%> 
<html> 
<head> 
<title></title> 
<script src="js/jquery-1.12.2.js"></script> 
<script language="JavaScript"> 
  function checkUserid() { 
    $.ajax({ 
      type : &#39;post&#39;, 
      data : { 
        userid : $("#userid").val(), 
        sex : "男" 
      }, 
      url : "Ajax/CheckServlet", 
      success : function(data) { 
        var obj = eval(&#39;(&#39; + data + &#39;)&#39;); 
      alert(obj.success); 
      }, 
      error : function() { 
      }, 
      complete : function() { 
      } 
    }); 
  } 
</script> 
</head> 
<body> 
 
  用户ID: 
  <input type="text" id="userid" name="userid"> <span id="msg"></span> 
    <br> 
      <button onclick="checkUserid()">传输</button> 
</body> 
</html>
Nach dem Login kopieren
Die $.ajax-Methode kann auch in Post- und Get-Methoden unterteilt werden. Ändern Sie den Typ, um die Sendemethode zu ändern


Das Ergebnis ist das gleiche als Methode 1

Verwandte Empfehlungen:


Javascript analysiert URL in JSON. Zwei Formatierungsmethoden

Beherrschen Sie die Prinzipien vollständig und Implementierungsmethoden von JSONP

JS ruft mehrere Daten in einem Formularfeld ab und konvertiert sie in das JSON-Format, Beispielfreigabe

Das obige ist der detaillierte Inhalt vonImplementierungsmethoden für Ajax-Front-End- und Back-End-Interaktionen mithilfe von JSON. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Erklärung dieser Website
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

Heiße KI -Werkzeuge

Undresser.AI Undress

Undresser.AI Undress

KI-gestützte App zum Erstellen realistischer Aktfotos

AI Clothes Remover

AI Clothes Remover

Online-KI-Tool zum Entfernen von Kleidung aus Fotos.

Undress AI Tool

Undress AI Tool

Ausziehbilder kostenlos

Clothoff.io

Clothoff.io

KI-Kleiderentferner

AI Hentai Generator

AI Hentai Generator

Erstellen Sie kostenlos Ai Hentai.

Heißer Artikel

R.E.P.O. Energiekristalle erklärten und was sie tun (gelber Kristall)
3 Wochen vor By 尊渡假赌尊渡假赌尊渡假赌
R.E.P.O. Beste grafische Einstellungen
3 Wochen vor By 尊渡假赌尊渡假赌尊渡假赌
R.E.P.O. So reparieren Sie Audio, wenn Sie niemanden hören können
3 Wochen vor By 尊渡假赌尊渡假赌尊渡假赌
WWE 2K25: Wie man alles in Myrise freischaltet
4 Wochen vor By 尊渡假赌尊渡假赌尊渡假赌

Heiße Werkzeuge

Notepad++7.3.1

Notepad++7.3.1

Einfach zu bedienender und kostenloser Code-Editor

SublimeText3 chinesische Version

SublimeText3 chinesische Version

Chinesische Version, sehr einfach zu bedienen

Senden Sie Studio 13.0.1

Senden Sie Studio 13.0.1

Leistungsstarke integrierte PHP-Entwicklungsumgebung

Dreamweaver CS6

Dreamweaver CS6

Visuelle Webentwicklungstools

SublimeText3 Mac-Version

SublimeText3 Mac-Version

Codebearbeitungssoftware auf Gottesniveau (SublimeText3)

Tipps zur Leistungsoptimierung für die Konvertierung von PHP-Arrays in JSON Tipps zur Leistungsoptimierung für die Konvertierung von PHP-Arrays in JSON May 04, 2024 pm 06:15 PM

Zu den Leistungsoptimierungsmethoden für die Konvertierung von PHP-Arrays in JSON gehören: Verwendung von JSON-Erweiterungen und der Funktion json_encode(); Verwendung von Puffern zur Verbesserung der Leistung der Schleifencodierung; JSON-Codierungsbibliothek.

Wie steuern Anmerkungen in der Jackson-Bibliothek die JSON-Serialisierung und -Deserialisierung? Wie steuern Anmerkungen in der Jackson-Bibliothek die JSON-Serialisierung und -Deserialisierung? May 06, 2024 pm 10:09 PM

Anmerkungen in der Jackson-Bibliothek steuern die JSON-Serialisierung und -Deserialisierung: Serialisierung: @JsonIgnore: Ignorieren Sie die Eigenschaft @JsonProperty: Geben Sie den Namen an @JsonGetter: Verwenden Sie die get-Methode @JsonSetter: Verwenden Sie die set-Methode Deserialisierung: @JsonIgnoreProperties: Ignorieren Sie die Eigenschaft @ JsonProperty: Geben Sie den Namen @JsonCreator an: Verwenden Sie den Konstruktor @JsonDeserialize: Benutzerdefinierte Logik

Wie erhalte ich Variablen aus der PHP-Methode mit Ajax? Wie erhalte ich Variablen aus der PHP-Methode mit Ajax? Mar 09, 2024 pm 05:36 PM

Die Verwendung von Ajax zum Abrufen von Variablen aus PHP-Methoden ist ein häufiges Szenario in der Webentwicklung. Durch Ajax kann die Seite dynamisch abgerufen werden, ohne dass die Daten aktualisiert werden müssen. In diesem Artikel stellen wir vor, wie man Ajax verwendet, um Variablen aus PHP-Methoden abzurufen, und stellen spezifische Codebeispiele bereit. Zuerst müssen wir eine PHP-Datei schreiben, um die Ajax-Anfrage zu verarbeiten und die erforderlichen Variablen zurückzugeben. Hier ist ein Beispielcode für eine einfache PHP-Datei getData.php:

PHP und Ajax: Erstellen einer Autovervollständigungs-Vorschlags-Engine PHP und Ajax: Erstellen einer Autovervollständigungs-Vorschlags-Engine Jun 02, 2024 pm 08:39 PM

Erstellen Sie eine Engine für Autovervollständigungsvorschläge mit PHP und Ajax: Serverseitiges Skript: Verarbeitet Ajax-Anfragen und gibt Vorschläge zurück (autocomplete.php). Client-Skript: Ajax-Anfrage senden und Vorschläge anzeigen (autocomplete.js). Praktischer Fall: Fügen Sie ein Skript in die HTML-Seite ein und geben Sie die Kennung des Sucheingabeelements an.

Vertiefendes Verständnis von PHP: Implementierungsmethode zur Konvertierung von JSON Unicode in Chinesisch Vertiefendes Verständnis von PHP: Implementierungsmethode zur Konvertierung von JSON Unicode in Chinesisch Mar 05, 2024 pm 02:48 PM

Vertiefendes Verständnis von PHP: Implementierungsmethode zum Konvertieren von JSONUnicode in Chinesisch Während der Entwicklung stoßen wir häufig auf Situationen, in denen wir JSON-Daten verarbeiten müssen, und die Unicode-Codierung in JSON verursacht in einigen Szenarien einige Probleme, insbesondere wenn Unicode konvertiert werden muss Bei der Kodierung wird in chinesische Zeichen konvertiert. In PHP gibt es einige Methoden, die uns bei der Umsetzung dieses Konvertierungsprozesses helfen können. Im Folgenden wird eine allgemeine Methode vorgestellt und es werden spezifische Codebeispiele bereitgestellt. Lassen Sie uns zunächst das Un in JSON verstehen

PHP vs. Ajax: Lösungen zum Erstellen dynamisch geladener Inhalte PHP vs. Ajax: Lösungen zum Erstellen dynamisch geladener Inhalte Jun 06, 2024 pm 01:12 PM

Ajax (Asynchronous JavaScript and XML) ermöglicht das Hinzufügen dynamischer Inhalte, ohne die Seite neu laden zu müssen. Mit PHP und Ajax können Sie eine Produktliste dynamisch laden: HTML erstellt eine Seite mit einem Containerelement und die Ajax-Anfrage fügt die Daten nach dem Laden zum Element hinzu. JavaScript verwendet Ajax, um über XMLHttpRequest eine Anfrage an den Server zu senden, um Produktdaten im JSON-Format vom Server abzurufen. PHP nutzt MySQL, um Produktdaten aus der Datenbank abzufragen und in das JSON-Format zu kodieren. JavaScript analysiert die JSON-Daten und zeigt sie im Seitencontainer an. Durch Klicken auf die Schaltfläche wird eine Ajax-Anfrage zum Laden der Produktliste ausgelöst.

PHP-Tutorial: So konvertieren Sie JSON-Unicode in chinesische Zeichen PHP-Tutorial: So konvertieren Sie JSON-Unicode in chinesische Zeichen Mar 05, 2024 pm 06:36 PM

JSON (JavaScriptObjectNotation) ist ein leichtes Datenaustauschformat, das häufig für den Datenaustausch zwischen Webanwendungen verwendet wird. Bei der Verarbeitung von JSON-Daten stoßen wir häufig auf Unicode-codierte chinesische Zeichen (z. B. „u4e2du6587“) und müssen diese in lesbare chinesische Zeichen konvertieren. In PHP können wir diese Konvertierung durch einige einfache Methoden erreichen. Als Nächstes erfahren Sie, wie Sie JSONUnico konvertieren

Schnelle Tipps zum Konvertieren von PHP-Arrays in JSON Schnelle Tipps zum Konvertieren von PHP-Arrays in JSON May 03, 2024 pm 06:33 PM

PHP-Arrays können über die Funktion json_encode() in JSON-Strings konvertiert werden (zum Beispiel: $json=json_encode($array);) und umgekehrt kann die Funktion json_decode() zum Konvertieren von JSON in Arrays ($array=) verwendet werden json_decode($json);) . Weitere Tipps sind die Vermeidung tiefgreifender Konvertierungen, die Angabe benutzerdefinierter Optionen und die Verwendung von Bibliotheken von Drittanbietern.

See all articles