ajax学习笔记

炒饭加点盐

于 2020-08-04 23:33:15 发布

阅读量149

点赞数

分类专栏： ajax

本文链接：https://blog.csdn.net/weixin_45730220/article/details/107803631

版权

ajax 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

ajax学习笔记

什么是ajax
ajax

什么是ajax

Ajax 即“Asynchronous Javascript And XML”（异步 JavaScript 和 XML），是指一种创建交互式、快速动态网页应用的网页开发技术，无需重新加载整个网页的情况下，能够更新部分网页的技术。

ajax

写ajax首先导入JQuery:
JQuery文档地址:https://www.bootcdn.cn/jquery/
在javascript中编写ajax代码:

<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>Title</title>

    <script src="${pageContext.request.contextPath}/statics/js/jquery-3.5.1.js"></script>

    <script>
    	//input标签失去焦点时执行的方法
        function a1() {
        	//ajax格式$.ajax(),$.post()使用post方法来执行ajax
        	/*ajax中要传入几个参数
        	*url:请求controller的url
        	*data：需要传给controller方法的参数,格式{"key","value"}
        	*success:请求成功后的方法function(data),其中data为请求url执行方法的返回值
        	*/
            $.post({
                url:"${pageContext.request.contextPath}/a3",
                data:{"username":$("#name").val()},
                success:function (data) {
                    if(data === "OK"){
                        $("#userInfo").css("color","green");
                        $("#userInfo").html(data);
                    }
                    if(data === "ERROR" || data === "用户名不能为空"){
                        $("#userInfo").css("color","red");
                        $("#userInfo").html(data);
                    }
                }
            })
        }

        function a2() {
            $.post({
                url:"${pageContext.request.contextPath}/a4",
                data:{"pwd":$("#pwd").val()},
                success:function (data) {
                    if(data === "密码正确!"){
                        $("#pwdInfo").css("color","green");
                        $("#pwdInfo").html(data);
                    }
                    if(data === "你输入的密码有误，请重新输入!" || data === "请输入密码") {
                        $("#pwdInfo").css("color", "red");
                        $("#pwdInfo").html(data);
                    }
                }
            })
        }
    </script>

</head>
<body>

<p>
    用户名: <input type="text" id="name" onblur="a1()">
    <span id="userInfo">

    </span>
</p>
<p>
    密码: <input type="password" id="pwd" onblur="a2()">
    <span id="pwdInfo">

    </span>
</p>
</body>
</html>

controller方法:

    @RequestMapping("/a3")
    @ResponseBody
    //方法传参参数名和前端data的key相同
    public String a3(String username){
        if(username != ""){
            if("huangyu".equals(username)){
                return "OK";
            }else {
                return "ERROR";
            }
        }
        return "用户名不能为空";
    }

    @RequestMapping("/a4")
    @ResponseBody
    public String a4(String pwd){
        if(pwd != ""){
            if("123456".equals(pwd)){
                return "密码正确!";
            }else {
                return "你输入的密码有误，请重新输入!";
            }
        }
        return "请输入密码";
    }