快捷導(dǎo)航

jQuery Ajax前后端使用JSON進(jìn)行交互示例

更新時(shí)間：2017年03月17日 09:36:44 作者：Jaer_zk

本篇文章主要介紹了jQuery Ajax前后端使用JSON進(jìn)行交互示例，實(shí)現(xiàn)前端通過jQuery Ajax傳輸json到后端，后端接收json，對json進(jìn)行處理，后端返回一個(gè)json給前端，有興趣的可以了解一下。

需求：

前端通過jQuery Ajax傳輸json到后端，后端接收json，對json進(jìn)行處理，后端返回一個(gè)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 { 
    /*設(shè)置字符集為'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的方式，所以要配置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>

在頁面輸入一個(gè)ID，可以在后臺接收到并且打印出來，后臺通過PrintWriter進(jìn)行回寫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>

結(jié)果與$.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來修改發(fā)送的方式

結(jié)果與方法1是相同的

以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章: