使用原生Ajax的步骤

最新推荐文章于 2024-07-12 16:26:30 发布

SouthWind_ZK

最新推荐文章于 2024-07-12 16:26:30 发布

阅读量131

点赞数 2

文章标签： Ajax java

本文链接：https://blog.csdn.net/qq_36427906/article/details/103187831

版权

html界面：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>ajax测试</title>
</head>
<body>
<table>
    <thead>
    <tr>id</tr>
    <tr>name</tr>
    <tr>tag</tr>
    </thead>
    <tbody id="tList">

    </tbody>
</table>
<button onclick="getlist()">获取</button>

<script src="js/jquery-3.4.1.js"></script>
<script>
    function getlist() {
        var xhr = null;
        //判断当前浏览器是否支持XMLHttpRequest对象，如果支持则创建
        if (window.XMLHttpRequest) {
            xhr = new XMLHttpRequest();

        } else {
            //老版本的ie浏览器使用ActiveX对象
            xhr = new ActiveXObject("Microsoft.XMlHTTP");
        }
        //设置回调函数
        xhr.onreadystatechange = function () {
            //xhr.readyState返回一个XMLRequest代理当前所处的状态,readyState 4 表示当前界面加载完成,status 200 代表是一个成功的请求
            if (xhr.readyState == 4 && xhr.status == 200) {
                //获取响应文本并解析转换为JavaScript 对象
                var arr = JSON.parse(xhr.responseText);
                //遍历数组并添加到表格中
                $.each(arr, function (i, n) {
                    $('#tList').append("<tr> <td>" + n.id + "<td>" + n.name + "</td>" + "<td>" + n.tag + "</td>" + "</tr>")

                })
            }
        }
        //设置open 请求方式为post， url为/do , true为异步请求方式，false为同步方式
        xhr.open("post", "/do", true);
        //发送请求
        xhr.send();
    }


</script>
</body>
</html>

Servlet

后台就是把一个对象集合转换为jsonString传给前端

@WebServlet("/do")
public class ServletDemo extends HttpServlet {
    @Override
    protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
        doPost(req,resp);
    }

    @Override
    protected void doPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
        req.setCharacterEncoding("utf-8");
        resp.setContentType("text/html;charset=utf-8");
        Teacher teacher = new Teacher(1, "熊根滔", "zz");
        Teacher teacher1 = new Teacher(2, "熊根滔", "z");
        Teacher teacher2 = new Teacher(3, "熊根滔", "zz");
        Teacher teacher3 = new Teacher(4, "熊根滔", "saf");
        Teacher teacher4 = new Teacher(5, "熊根滔", "asf");
        Teacher teacher5 = new Teacher(6, "熊根滔", "sfh");
        Teacher teacher6 = new Teacher(7, "熊根滔", "sdg");
        List<Teacher> teachers = new ArrayList<>();
        teachers.add(teacher);
        teachers.add(teacher1);
        teachers.add(teacher2);
        teachers.add(teacher3);
        teachers.add(teacher5);
        teachers.add(teacher4);
        teachers.add(teacher6);

        //将集合转换为json字符串
        String zz = JSON.toJSONString(teachers);
        //传给前端
        resp.getWriter().println(zz);



    }
}

SouthWind_ZK

关注

2
点赞
踩
0

收藏

觉得还不错? 一键收藏
2
评论
使用原生Ajax的步骤

html界面：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>ajax测试</title></head><body><table> <thead> ...
复制链接

扫一扫