在请求中通过 JSON 格式传递数据

  • 除了在响应中通过 JSON 格式来传递数据，在请求中也可以使用 JSON 格式传递数据。
  • 在请求中使用 JSON 格式传递数据，提交方式需要使用 POST 方式，
  • 通过 JavaScript 中的 JSON.stringify()函数将 JavaScript 对象转换为 JSON 格式数据。
  • 通过 send 方法将参数传递到 Servlet 中，在 Servlet 中通过字符输入流获取 JSON 格式数据。

步骤

  •  添加 jackson-annotations.jar、jackson-core.jar、jackson-databind.jar
  • JSON.stringify()函数将 JavaScript 对象转换为 JSON 格式的数据
  • POST 方式
  • send()函数将 JSON 格式的数据提交到服务端。
  • 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>