Ajax理解

最新推荐文章于 2024-06-14 15:02:13 发布

lazy_zhuo

最新推荐文章于 2024-06-14 15:02:13 发布

阅读量783

点赞数

文章标签： java spring 数据库

本文链接：https://blog.csdn.net/lazy_zhuo/article/details/123824974

版权

1、网页中发生一个事件（页面加载、按钮点击）
2、由 JavaScript 创建 XMLHttpRequest 对象
3、XMLHttpRequest 对象向 web 服务器发送请求
4、服务器处理该请求
5、服务器将响应发送回网页
6、由 JavaScript 读取响应
7、由 JavaScript 执行正确的动作（比如更新页面）

<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>登录页面</title>
    <script src="static/js/jquery-3.6.0.js"></script>
    <script>
        function a1(){
            $.post({
                url: "${pageContext.request.contextPath}/a3",
                data: {"name":$("#name").val()},
                success: function (data){
                    if(data.toString()==="OK"){
                        $("#userInfor").css("color","green")
                    }else{
                        $("#userInfor").css("color","red")
                    }
                    $("#userInfor").html(data);
                }
            })
        }
        function a2(){
            $.post({
                url: "${pageContext.request.contextPath}/a3",
                data: {"pwd":$("#pwd").val()},
                success: function (data){
                    if(data.toString()==="OK"){
                        $("#pwdInfor").css("color","green")
                    }else{
                        $("#pwdInfor").css("color","red")
                    }
                    $("#pwdInfor").html(data);
                }
            })
        }
    </script>
</head>
<body>
    <p>
        用户名: <input type="text" id="name" onblur="a1()">
        <span id="userInfor"></span>
    </p>
    <p>
        密码: <input type="text" id="pwd" onblur="a2()">
        <span id="pwdInfor"></span>
    </p>
</body>
</html>

@RestController
public class AjaxController {
    @RequestMapping("/t1")
    public String test(){
        return "hello";
    }

    @RequestMapping("/a1")
    public void a1(String name, HttpServletResponse response) throws IOException {
        System.out.println("a1:param"+name);
        if("wangzhuo".equals(name)){
            response.getWriter().write("true");
        }else{
            response.getWriter().write("false");
        }
    }

    @RequestMapping("/a2")
    public List<User> a2(){
        List<User> list = new ArrayList<User>();
        list.add(new User("王卓1号",3,"男"));
        list.add(new User("王卓2号",3,"女"));
        list.add(new User("王卓3号",3,"男"));
        return list;
    }

    @RequestMapping("/a3")
    public String loginUser(String name,String pwd){
        String msg = "";
        if(name!=null){
            if("admin".equals(name)){
                msg = "OK";
            }else{
               msg = "用户名错误";
            }
        }
        if(pwd!=null){
            if("123456".equals(pwd)){
                msg = "";
            }else{
                msg = "密码错误";
            }
        }
        System.out.println(msg);
        return msg;
    }
}

学习狂神说链接: 博客链接

lazy_zhuo

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Ajax理解

1、网页中发生一个事件（页面加载、按钮点击）2、由 JavaScript 创建 XMLHttpRequest 对象3、XMLHttpRequest 对象向 web 服务器发送请求4、服务器处理该请求5、服务器将响应发送回网页6、由 JavaScript 读取响应7、由 JavaScript 执行正确的动作（比如更新页面）<%@ page contentType="text/html;charset=UTF-8" language="java" %><html>&lt
复制链接

扫一扫

Ajax理解

“相关推荐”对你有帮助么？