Jquery实现AJAX异步通信_代码007(未授权)

本文介绍: Aja x（Async hr on ousJav aScri pta ndXML），直译为“异步的Jav aScri p t与”，是一种创建交互式网页应用的网页开发技术，用于创建快速动态网页，由杰西·詹姆士·贾瑞特所提出。与传统的We b 应用相比，Ajax通过浏览器与服务器进行少量的数据交换就可以实现网页的异步更新，在不重新加载整个网页的情况下，即可对网页进行更新。……

Ajax的简介

Ajax的特点

Ajax向后端发送请求

发送请求后端数据回显

&lt;script src="https://code.jquery.com/jquery-3.1.1.min.js"&gt;</script>

<head>
<script>
        function  a(){
            $.ajax({
                url: "/a1.action",
                data:{
                    name: $("#username").val()
                },
                success:function (data) {
                    alert("成功"+data)
                }
            })
        }
    </script>
</head>
<body>
    用户名：<input type="text" id="username" onblur="a()">
<a href="/login.action">点我</a>
</body>

@RequestMapping("/a1")
public void a1(String name, HttpServletResponse response) throws IOException {
    if("aaa".equals(name)){
        response.getWriter().print("true");
    }else{
        response.getWriter().print("false");
    }
}

@Data
@NoArgsConstructor
@AllArgsConstructor
public class User {
    private Integer id;
    private String loginname;
    private String password;
}

@RequestMapping("/userlist")
@ResponseBody
public List<User> userlist(){
    return userService.queryAll();
}

前端页面,通过得到的数据在Ajax里面将其展示到body

<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>Title</title>
</head>
<body>
<div>
    <input type="button" id="btn" value="获取用户数据"/>
    <table width="80%" align="center">
        <tr>
            <td>编号</td>
            <td>账号</td>
            <td>密码</td>
        </tr>
        <tbody id="content">
        </tbody>
    </table>
</div>

</body>
<script src="/static/js/jquery-3.6.0.js"></script>
<script>
    $(function () {
        $("#btn").click(function (){
            $.post("/userlist.action",function (data) {
                let list = data
                var html='';
                for (let i = 0; i < list.length; i++) {
                    console.log(list[i])
                    html += '<tr>' +
                        '<td>' + list[i].id +'</td>' +
                        '<td>' + list[i].loginname +'</td>' +
                        '<td>' + list[i].password +'</td>' +
                        '</tr>'
                }
                $("#content").html(html);
            })
        })
    })

</script>
</html>