AJAX 概述

百度百科它是这么描述滴 !

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

通过在后台与服务器进行少量数据交换，Ajax 可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下，对网页的某部分进行更新。

注意哦 : ----Ajax 不是一种新的编程语言，而是一种用于创建更好更快以及交互性更强的Web应用程序的技术。

主要优缺点

使用Ajax的最大优点，就是能在不更新整个页面的前提下维护数据。这使得Web应用程序更为迅捷地回应用户动作，并避免了在网络上发送那些没有改变的信息。

Ajax不需要任何浏览器插件，但需要用户允许JavaScript在浏览器上执行。

实例说话

GET 请求检查用户名是否存在

image-20200612184320448.png

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Get</title>
    <script src="/static/jQuery-1.11/jquery-1.11.3.js"></script><script>
    $(function () {
        // blur --> 当元素失去焦点时发生 blur 事件。
//blur() 函数触发 blur 事件，或者如果设置了 function 参数，该函数也可规定当发生 blur 事件时执行的代码。
       $('#username').blur(function () {
           console.log(this);
           var username=$(this).val();
           console.log(username);
           //发送AJAX 请求  使用 get 方法
            $.get('/check_username.do','username='+username,function (data) {
                console.log(data);
                console.log(data.msg);
                console.log(data.success);

                $('#result').html(data.msg).css('color',data.success?'green':'red');
                // if(data.success){
                //     $('#result').css('color','green');
                // }else{
                //     $('#result').css('color','red');
                // }
            })
       })
    })
    </script>
</head>
<body>
<span id="result"></span></br>
<input type="text" id="username" placeholder="用户名">
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Get</title>
    <script src="/static/jQuery-1.11/jquery-1.11.3.js"></script><script>
    $(function () {
        
       $('#username').blur(function () {
           var username=$(this).val();
           $.get('/check_username.do','username='+username,function (data) {           
                $('#result').html(data.msg).css('color',data.success?'green':'red');   
                
            })
       })
    })
    </script>
</head>
<body>
<span id="result"></span></br>
<input type="text" id="username" placeholder="用户名">
</body>
</html>

@RequestMapping("/check_username")
    @ResponseBody //加了 这个 就不是跳转的意思 哦  注意
    public JsonResult get(String username){
        if("666".equals(username)){
            return new JsonResult(false,"用户名已被注册");
        }else {
            return new JsonResult(true,"可以注册");
        }
    }

POST 请求用户登录操作

image-20200612184212294.png

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Post</title>
    <script src="/static/jQuery-1.11/jquery-1.11.3.js"></script>
    <script>
        $(function () {
            $('#login').click(function () {
                console.log($('#username').val());
                var username = ($('#username').val());
                var password = ($('#password').val());
                var param = {username: username, password: password}
                $.post('/loginJson.do', param, function (data) {
                    if (data.success) {
                        location.href = 'http://www.baidu.com'
                    } else {
                        $('#result').html(data.msg).css('color', red)
                    }
                });
            })
        })
    </script>
</head>
<body>
<span id="result"></span></br>
<input id="username" placeholder="请输入用户名" type="text"/><br>
<input id="password" placeholder="请输入密码" type="text"/><br>
<button id="login">登录</button>
</body>
</html>

@RequestMapping("/loginJson")
    @ResponseBody //加了 这个 就不是跳转的意思 哦  注意
    public JsonResult post(String username,String password){
        if("666".equals(username) && "6666".equals(password)){
            return new JsonResult(true,"登陆成功");
        }else {
            return new JsonResult(false,"登录失败");
        }
    }

二级联动

image-20200612184057501.png

@RequestMapping("/provinces")
    @ResponseBody //加了 这个 就不是跳转的意思 哦  注意
    public List<Province> provinces(){
        return Province.getAllProvince();
    }

    @RequestMapping("/cities")
    @ResponseBody //加了 这个 就不是跳转的意思 哦  注意
    public List<City> cities(Long pid){
        return City.getCityByProvinceId(pid);
    }

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>省份和城市下拉框</title>
    <script src="/static/jQuery-1.11/jquery-1.11.3.js"></script>
    <script>
        $(function () {
            //优化下

            var $p = $('#p')
            var $c = $('#c')

            $.get('/provinces.do', function (data) {
                //console.log(data)
                data.forEach(function (value) {
                    console.log(value)
                    console.log(value.id)
                    console.log(value.name)
                    $p.append('<option value="' + value.id + '">' + value.name + '</option>')
                })
            })
            $p.change(function () {
                var pid = $(this).val()  //获取被选中的 option value 属性值
                $c.empty();
                $c.append('<option value="-1">请选择</option>')

                if (pid > 0) {//节省数据库性能  不会 '请选择' 也重新发起请求
                    $.get('/cities.do', 'pid=' + pid, function (data) {
                        data.forEach(function (value) {
                            $('#c').append('<option value=" ' + value.id + ' ">' + value.name + '</option>')
                        })
                    })
                }
            })
        })
    </script>
</head>
<body>
省份 : <select id="p">
    <option value="-1">请选择</option>
</select>
城市 : <select id="c">
    <option value="-1">请选择</option>
</select>
</body>
</html>