suchen

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

小云云
小云云Original
2018-01-22 13:16:422696Durchsuche

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>

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

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>

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

Java JavaScript json jquery ajax servlet Object xml JS 对象
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：Klicken Sie auf die Schaltfläche, um den Bestätigungscode zu senden. Es erscheint ein Countdown.Nächster Artikel：Klicken Sie auf die Schaltfläche, um den Bestätigungscode zu senden. Es erscheint ein Countdown.

In Verbindung stehende Artikel

Mehr sehen