ajax利用JSON的形式，从后端查询获取到数据展示到前段

小梁不秃头

于 2024-08-06 17:42:23 发布

阅读量245

点赞数 3

文章标签： ajax json 前端

本文链接：https://blog.csdn.net/2401_83071551/article/details/140961716

版权

后端代码

package Test;

import com.alibaba.fastjson.JSON;
import model.stu;

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;
import java.util.ArrayList;
@WebServlet("/ajax333")
public class ajax3 extends HttpServlet {
    @Override
    protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
        this.doPost(req, resp);
    }

    @Override
    protected void doPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {

        ArrayList<stu> stus = new ArrayList<stu>();
        stu stu1 = new stu();
        stu1.setId(6);
        stu1.setName("a");
        stu1.setAge(16);

        stu stu2 = new stu();
        stu2.setId(8);
        stu2.setName("b");
        stu2.setAge(18);

        stu stu3 = new stu();
        stu3.setId(10);
        stu3.setName("c");
        stu3.setAge(88);

        stus.add(stu1);
        stus.add(stu2);
        stus.add(stu3);

//        stu2集合不能直接前端，字符stu
//        集合转换为jesion "字符串” jdk工具序列化
//javabean转换为jsen
        String res = JSON.toJSONString(stus);
        System.out.println("后端JSON格式的字符串= " + res);
//        传回前端是健和值的形式
//        后端以JSON的形式返回前端
        resp.setContentType("application/json");
        resp.setCharacterEncoding("utf-8");
//        响应用户请求时，告知用户的请求编码
        PrintWriter writer = resp.getWriter();
        writer.write(res);
//        释放缓存和对象
        writer.flush();
        writer.close();
    }
}

前端代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>json前后端结合测试代码</title>
    <script>
        function ajax4()//函数google
        {
            //  创建ajax对象
            let xmlHttpRequest = new XMLHttpRequest();
            //  配置后端请求类型 get的方式或者post   true异步请求数据
            xmlHttpRequest.open("get", "/hotwed_war_exploded/ajax333", true);
            //  监听数据是否请求成功
            xmlHttpRequest.onreadystatechange = function () {
                //  服务器和客户端握手
                if (xmlHttpRequest.readyState == 4 && xmlHttpRequest.status == 200)//服务器解析成功
                {
                    //responseText获取后端返回的数据给data
                    let data =JSON.parse(xmlHttpRequest.responseText);

                    //把json格式的字符串转换为JSON格式的对象，反序列化，可以方便获取到健和值
                    //在控制台输出
                    // 在JavaScript中使用的，它试图打印出数组data中第三个元素的ID和name属性。
                    console.log("data" + data[2].ID);
                    console.log("data" + data[2].Age);
                    console.log("data" + data[2].Name);

                    document.querySelector(".name").innerHTML = data[2].name;
                    document.querySelector(".age").innerHTML = data[2].age;
                    document.querySelector(".id").innerHTML = data[2].id;
                    //把data渲染到前段页面
                    // document.getElementById("show").innerHTML=data
                }
            }
            //发送请求
            xmlHttpRequest.send();
        }
    </script>
</head>
<body onload="ajax4()">

<div id="show" style="border: solid 3px red;width: 500px;height: 100px;background: lightblue;">
   姓名:<span class="name"></span>
    年龄:<span class="age"></span>
    性别:<span class="id"></span>
</div>
<button>
    请求数据
</button>

</body>
</html>