在請求中通過 JSON 格式傳遞數據
- 除了在響應中通過 JSON 格式來傳遞數據,在請求中也可以使用 JSON 格式傳遞數據。
- 在請求中使用 JSON 格式傳遞數據,提交方式需要使用 POST 方式,
- 通過 JavaScript 中的 JSON.stringify()函數將 JavaScript 對象轉換為 JSON 格式數據。
- 通過 send 方法將參數傳遞到 Servlet 中,在 Servlet 中通過字符輸入流獲取 JSON 格式數據。
步驟
- 添加 jackson-annotations.jar、jackson-core.jar、jackson-databind.jar
- 在頁面的 JavaScript 中通過 JSON.stringify()函數將 JavaScript 對象轉換為 JSON 格式的數據
- 將請求方式修改為 POST 方式
- 通過 send()函數將 JSON 格式的數據提交到服務端。
- 在 Servlet 中通過字符輸入流讀取請求體中 JSON 格式的數據
- 通過 jackson API 將獲取到的 JSON 格式的數據轉換為 Java 對象
servlet的編寫
import javax.servlet.ServletException; import javax.servlet.annotation.WebServlet; import javax.servlet.http.HttpServlet; import javax.servlet.http.HttpServletRequest; import javax.servlet.http.HttpServletResponse; import java.io.IOException; import java.io.PrintWriter; /** * 在請求中通過json格式傳遞數據 */ @WebServlet("/request") public class requestjson extends HttpServlet { @Override protected void doPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException { //設置請求編碼
req.setCharacterEncoding("utf-8"); //通過字符輸入流從請求體中獲取提交的JSON格式的數據
String s=req.getReader().readLine(); //使用Jackson將JSON格式的字符串對象轉換成java對象
ObjectMapper objectMapper=new ObjectMapper(); User user=objectMapper.readValue(s, User.class); System.out.println(user.getUserid()+" "+user.getUsername()); resp.setContentType("application/json"); PrintWriter pw=resp.getWriter(); pw.println(user); pw.flush(); pw.close(); } }
JSP頁面的編寫
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
<title>Title</title>
<script>
function but(){ //取文本域中的值
var id=document.getElementById("userid").value var name=document.getElementById("username").value //定義一個js對象
var obj={userid:id,username:name} //將js對象轉換成json格式的數據
var content=JSON.stringify(obj) alert(content) //創建XMLHttpRequest對象
var xhr=new XMLHttpRequest() //給定請求方式和請求地址
xhr.open("post","request") //異步請求的發送,講數據發送到請求的地址
xhr.send(content) //send執行完畢后,立刻執行下列方法(將函數的地址賦給onreadystatechange)
//回調函數,通過onreadystatechange回調自己寫的函數
xhr.onreadystatechange=function (){ //0:open函數沒有被調用
//1:open函數正在被調用
//2:send函數正在被調用
//3:服務端正在返回結果
//4:請求結束,並且服務端已經結束發送數據到客戶端
//4表示響應結束,200表示響應成功
if (xhr.readyState==4 && xhr.status==200){ alert(xhr.responseText) //通過JavaScript的內置對象JSON的parse方法將json格式字符串轉換成JavaScript對象
document.getElementById("span").innerHTML=content; } } } </script>
</head>
<body>
<%--由於是異步處理請求,不用放在表單內--%> 用戶id:<input type="text" name="userid" id="userid"><br> 用戶姓名:<input type="text" name="username" id="username"><br>
<span id="span"></span>
<input type="button" value="submit" onclick="but()">
</body>
</html>