jQuery Ajax 전후 단 JSON 을 사용 하여 대화 예제

6536 단어 상호 작용ajaxjson
필요:
전단 은 jQuery Ajax 를 통 해 json 을 백 엔 드 로 전송 하고 백 엔 드 는 json 을 받 아 json 을 처리 하 며 백 엔 드 는 json 을 전단 으로 되 돌려 줍 니 다.
여기 servlet 방식 을 사용 합 니 다.
1.$.post 방법 사용
index.jsp 페이지

<!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('Ajax/CheckServlet',//url 
    { 
      userid : $("#userid").val(), 
      sex : " " 
    }, function(data) { 
      var obj = eval('(' + data + ')'); 
      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 { 
    /*      'UTF-8'*/ 
    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 = "{'success':'  ','false':'  '}"; 
    pw.print(json); 
    pw.flush(); 
    pw.close(); 
 
  } 
}
servlet 방식 을 사용 하기 때문에 웹.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 를 입력 하면 배경 에서 받 고 출력 할 수 있 습 니 다.배경 은 PrintWriter 를 통 해 JSON 을 전단 으로 되 돌리 고 전단 은 eval 을 통 해 JSON 을 Object 대상 으로 바 꾸 고 obj.name 을 통 해 JSON 값 을 가 져 옵 니 다.
2.$.get 방법 을 사용 하여 jsp 페이지 의 post 를 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( 
      'Ajax/CheckServlet',//url 
      { 
        userid:$("#userid").val(), 
        sex:" " 
      }, 
      function(data){ 
        var obj = eval('('+data+')'); 
        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 : 'post', 
      data : { 
        userid : $("#userid").val(), 
        sex : " " 
      }, 
      url : "Ajax/CheckServlet", 
      success : function(data) { 
        var obj = eval('(' + data + ')'); 
      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 방법 으로 나 눌 수 있 으 며,type 을 수정 하여 보 내 는 방식 을 수정 할 수 있 습 니 다.
결과 와 방법 1 은 같다
이상 이 바로 본 고의 모든 내용 입 니 다.여러분 의 학습 에 도움 이 되 고 저 희 를 많이 응원 해 주 셨 으 면 좋 겠 습 니 다.
AngularJS 에서$http 사용 에 대한 간단 한 설명
angularJS 의$http:서버 와 의 대화 예제

좋은 웹페이지 즐겨찾기

개발자 우수 사이트 수집

개발자가 알아야 할 필수 사이트 100선 추천 우리는 당신을 위해 100개의 자주 사용하는 개발자 학습 사이트를 정리했습니다
best100-homepage