原生ajax+jsp+servlet，传输JSON数据实现页面局部刷新

原创已于 2022-09-05 09:58:17 修改 · 1k 阅读

9 ·

本内容遵循CC 4.0 BY-SA版权协议

标签

#servlet #java #json #ajax

于 2022-09-02 19:20:54 首次发布

本文介绍了如何使用JSP页面通过AJAX实现与Servlet的GET请求交互，展示了从数据库获取数据并转化为JSON，然后动态填充表格的过程。重点涉及XMLHttpRequest对象、Gson库和前后端数据同步。

1、jsp页面（ajxscon.jsp）

前端展示部分：创建点击事件和显示表格

<div>
    <table id="num">
        <tr>
            <td>学号</td>
            <td>姓名</td>
        </tr>
    </table>
    <button id="butt" name="butt" onclick="butt()" class="butt2"></button>
</div>

js部分：原生ajax（get请求）

<script>
        function butt(){
            var ajxs=new XMLHttpRequest();   //该对象用于在后台与服务器交换数据
            ajxs.open("get","/Servlet1",true) //建立连接,true--->异步，/Servlet1----->Servlet路径
            ajxs.send();    //发送，get不填内容
            ajxs.onreadystatechange = () => {                //回调函数
                if (ajxs.readyState==4 && ajxs.status==200){  //ajxs、网络连接 状态码
                    let obj=ajxs.responseText;
                    console.log(obj)
                    let json=JSON.parse(obj);  //转成json格式
                    var str="";
                    for (let i=0;i<json.length;i++){
                       str=str+ "<tr>" +
                        "<td>"+json[i].id+"</td>" +
                        "<td>"+json[i].name+"</td>" +
                        "</tr>"
                    }
                    document.getElementById("num").innerHTML=" " +   //table标签--->innerHTML属性 添加内容
                        "<tr> " +
                            "<td>学号</td> " +
                            "<td>姓名</td> " +
                        "</tr>" +str;
                }
            }
        }
    </script>

2、Servlet页面（Servlet1）

模拟从数据库取出数据，创建对象并转json格式（需要创建对应实体类，本文是Student）

@WebServlet("/Servlet1")
public class Servlet1 extends HttpServlet {
    @Override
    protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
        req.setCharacterEncoding("UTF-8");
        resp.setCharacterEncoding("UTF-8");
        Student student=new Student();
        student.setId(1);
        student.setName("张三");

        Student student1=new Student();
        student1.setId(2);
        student1.setName("李四");

        List<Student> list=new ArrayList<>();
        list.add(student);
        list.add(student1);

        Gson gson=new Gson();
        String json=gson.toJson(list); //转json格式
        
        PrintWriter os=resp.getWriter();
        os.write(json);
        os.flush();
        os.close();

    }

3、Gson的jar包及版本（pom.xml文件中添加）

<!-- https://mvnrepository.com/artifact/com.google.code.gson/gson -->
        <dependency>
            <groupId>com.google.code.gson</groupId>
            <artifactId>gson</artifactId>
            <version>2.9.1</version>
        </dependency>