Ajax学习

Ajax学习

ajax用来实现异步请求，主要学习三大件：

url：controller请求

data：键值对

success：回调函数

三部曲

1、编写对应处理的controller，返回消息时，产生消息字符串或者json数据

2、编写ajax请求

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

练习以及总结

需求一

要求一个输入框，监听焦点，如果失去焦点后输入框中写入admin，弹出框true，否者弹出false

解决：

1、首先创建一个springboot项目，导入springweb包，将jQuery包引入到静态资源static中，因为使用thymeleaf模板引擎，所以在pom文件中要引入thymeleaf依赖。

2、在静态文件template中新建index.html文件，并且在处引入thymeleaf，在

<script th:src="@{/js/jquery-3.4.1.js}"></script>

3、在中写一个,此标签需要包括type，id，onblur属性，分别用来表示输入框显示，提交ajax使用，监听事件用。

<input type="text" id="txtName" onblur="a1()" />

在此处提一下input中id与name的区别：

id一般作用于css与js，大部分用在前端作为唯一标识

name一般用于form表单提交，常用于后端

4、建立一个controller，编写业务逻辑

在此处服务器返回字符串，直接使用response

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

5、编写ajax请求

<script type="text/javascript">
    function a1() {
        // ajax默认是get请求
        $.ajax({
            url:"/ajax/a1",
            data:{'name':$("#txtName").val()},
            success:function (data,status) {
                console.log(data);
                console.log(status);
                alert(data);
            }
        });
    }
</script>

指定url，并且传入值到data中，在success中编写回调函数

需求二

要求两个输入框，放用户名和密码，当用户名和密码为admin和123123时，输入框显示OK,否则显示错误

流程如上，具体代码实现如下：

<p>
    用户名：<input type="text" id="name" onblur="a1()"/>
    <span id="userInfo"></span>
</p>
<p>
    密码：<input type="text" id="pwd" onblur="a2()"/>
    <span id="pwdInfo"></span>
</p>

@RequestMapping("/a3")
@ResponseBody
public String ajax3(String name,String pwd){
    System.out.println(name);
    String msg = "";
    if (name != null){
        if ("admin".equals(name)){
            msg = "OK";
        }else {
            msg = "用户名有误";
        }
    }
    if (pwd != null){
        if ("123123".equals(pwd)){
            msg = "OK";
        }else {
            msg = "密码不对";
        }
    }
    return msg;
}

function a1() {
    $.post({
        url:"/ajax/a3",
        data:{"name":$("#name").val()},
        success:function (data,status) {
            if (data.toString()=='OK'){
                $('#userInfo').css("color","green");
            }else {
                $('#userInfo').css("color","red");
            }
            $("#userInfo").html(data);
            console.log(data)
            console.log(status)
        }
    })
}
function a2() {
    $.post({
        url: "/ajax/a3",
        data: {"pwd":$("#pwd").val()},
        success:function (data,status) {
            if (data.toString() === 'OK'){
                $('#pwdInfo').css("color","green");
            }else {
                $('#pwdInfo').css("color","red");
            }
            $("#pwdInfo").html(data)
        }
    })

}