JSON을 사용한 Ajax 프런트엔드 및 백엔드 상호작용 구현 방법-JS 튜토리얼-php.cn

JSON을 사용한 Ajax 프런트엔드 및 백엔드 상호작용 구현 방법

小云云

풀어 주다： 2018-01-22 13:16:42

원래의

2693명이 탐색했습니다.

이 글에서는 JSON을 이용한 jQuery Ajax 프론트엔드와 백엔드 상호작용의 예시를 주로 소개합니다. 프론트엔드는 jQuery Ajax를 통해 json을 백엔드로 전송하고, 백엔드는 json을 처리합니다. end는 json을 프런트엔드로 반환합니다. 관심이 있는 경우 자세히 알아보고 모든 사람에게 도움이 되기를 바랍니다.

요구사항:

프런트엔드는 jQuery Ajax를 통해 json을 백엔드로 전송하고, 백엔드는 json을 받아 처리하고, 백엔드는 json을 프런트엔드로 반환합니다

서블릿 방식을 사용합니다. here

1. $.post 메소드 사용

index.jsp page

<!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 코드는 다음과 같습니다

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

로그인 후 복사

여기서는 서블릿 메소드를 사용하므로 web.xml을 구성해야 합니다.

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

로그인 후 복사

페이지 ID에 a를 입력하면 백그라운드에서 수신되어 인쇄될 수 있습니다. 백그라운드에서는 PrintWriter를 사용하여 JSON을 다시 작성하고 프런트엔드에 반환합니다. 프런트 엔드에서는 JSON을 개체 개체로 변환합니다. , obj.name

2을 통해 JSON 값을 얻습니다. $.get 메소드를 사용하면 jsp 페이지의 게시물을 get

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

로그인 후 복사

로 변경하면 됩니다. 결과는 $.post

와 같습니다.

3.$.ajax 메소드를 통해

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

로그인 후 복사

$.ajax 메소드도 post 메소드와 get 메소드로 나눌 수 있는데, 타입을 수정하여 전송 메소드를 수정한다

결과는 메소드 1과 같다