Implementierungsmethoden für Ajax-Front-End- und Back-End-Interaktionen mithilfe von JSON-js-Tutorial-php.cn

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

小云云

Freigeben： 2018-01-22 13:16:42

Original

2688 Leute haben es durchsucht

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!