本文主要介紹了jQuery Ajax前後端使用JSON進行交互示例，實現前端透過jQuery Ajax傳輸json到後端，後端接收json，對json進行處理，後端返回一個json給前端，有興趣的可以了解一下，希望能幫助大家。
需求：
前端透過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的方式，所以要設定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，可以在後台接收到並且列印出來，後台透過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是相同的
相關推薦：
#javascript將url解析為json格式的兩種方法
完全掌握jsonp的原理與實作方式
JS取得一個表單欄位中多條資料並轉換為json格式實例分享
以上是Ajax前後端使用JSON進行互動實作方法的詳細內容。更多資訊請關注PHP中文網其他相關文章！
