Ajax简单总结

Ajax总结

使用jQuery需要导入jQuery，使用Vue导入Vue，两个都用，自己原生态实现

三步曲

  1. 编写对应处理的Controller，返回消息或者字符串或者json格式的数据；

  2. 编写ajax请求

    1. url : Controller请求
    2. data：键值对
    3. success：回调函数

  3. 给Ajax绑定事件，点击.click，失去焦点onblur，键盘弹起 keyup

举例

<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>ajax</title>
    <script type="text/javascript" th:src="@{/static/js/jquery.js}"></script>
</head>
<body>
    <p>
        用户名:
        <input type="text" id="name" onblur="b1()">
        <span id="nameInfo"></span>
    </p>
    <p>
        密码:
        <input type="password" id="pwd" onblur="b2()">
        <span id="pwdInfo"></span>
    </p>
<script type="text/javascript">
    function b1() {
       $.ajax({
           url:"http://localhost:8080/ajax",
           data:{"name":$("#name").val()},
           success:function (data) {
               console.log(data);
               if (data.toString() == "ok") {
                   $("#nameInfo").css("color", "green");
               } else {
                   $("#nameInfo").css("color", "red");
               }
               $("#nameInfo").html(data);
           }
       });
    };

    function b2() {
        $.ajax({
            url:"http://localhost:8080/ajax",
            data:{"pwd":$("#pwd").val()},
            success:function (data) {
                console.log(data);
                if (data.toString() == "ok") {
                    $("#pwdInfo").css("color", "green");
                } else {
                    $("#pwdInfo").css("color", "red");
                }
                $("#pwdInfo").html(data);
            }
        });
    };
</script>
</body>
</html>

@RequestMapping("/ajax")
@ResponseBody
public String ajax(String name, String pwd) throws IOException {
    String msg = "";
    if (name != null) {
        if ("admin".equals(name)) {
            msg = "ok";
        } else {
            msg = "用户名有误";
        }
    }
    if (pwd != null) {
        if ("123456".equals(pwd)) {
            msg = "ok";
        } else {
            msg = "密码有误";
        }
    }
    return msg;
}

结果：
image

posted @ 2021-09-07 16:16  SEVEN_CCODE  阅读(33)  评论(0)    收藏  举报