三、jQuery中的Ajax - 码农教程

JQuery中的Ajax

方法

load方法
.get和.post方法
$.ajax方法
.getScript方法和.JSON方法

事件

ajaxStart和ajaxStop
ajaxComlete、ajaxSend、ajaxError、ajaxSuccess事件

load方法

$element.load(url,[data],[callback])

url 异步请求的地址
data 异步请求的数据.。如果传入参数那么请求方式为post，否则为get。请求数据为键值对形式。
callback 自动将返回结果写入到目标元素中

$('.btn').click(function () {
    $('button').load('data/server2.txt', { name: '123' }, function () {
        console.log('success');
    })
})

此方法会自动将请求结果写入到调用元素中。

get与post方法

.get(url,[data],[callback],[type])与.post(url,[data],[callback],[type])

url 请求的地址
data 请求的数据。键值对形式。
callback 请求完成时的回调函数。会将请求数据的结果作为回调函数的参数传入。
type 设置返回数据内容的格式。值为xml、html、script、json、text和_default。

$('.btn').click(function () {
    $.get('data/server1.json', { name: '666' }, function (backData) {
        console.log(backData);
    }, 'json')
})

ajax方法

$.ajax('data/server1.json', {
    // 请求的类型
    type: 'get',
    // 请求的数据
    data: {
        name: '666'
    },
    // 服务器返回的数据类型
    dataType: 'json',
    // 响应成功时的回调函数
    success: function (backData) {
        console.log(backData);
    }
})

getScript方法

$.getScript(url,[backcall])

$.getScript('data/server3.js', function () {
    console.log('加载成功了');
})

获取成功后会自动调用获取的脚本js代码。回调函数会返回脚本的字符串类型，可以通过eval函数进行调用。

getJSON

$.getJSON(url,[backcall])

$('.btn').click(function () {
    $.getJSON('data/server1.json', function (data) {
        console.log('加载成功了,返回数据为：', data);
    })
})

请求方式为GET。

省市联动

<!DOCTYPE html>
<html lang="en">

    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
    </head>

    <body>
        <select id="province"></select>
        <select id="city">
            <option value="">---</option>
        </select>
        <select id="county">
            <option value="">---</option>
        </select>
        <script>
            var $province = $('#province')
            var $city = $('#city')
            var json
            $.getJSON('data/server1.json', function (data) {
                $.each(data, function (index, obj) {
                    json = data
                    var provinceName = obj.province
                    $province.append(`<option value="${provinceName}">${provinceName}</option>`)
                })
                $province.bind('change', function () {
                    $city.empty()
                    $city.append(`<option value="">----</option>`)
                    var provinceElementName = $(this).children('option:selected').text()
                    $.each(json, function (index, obj) {
                        var provinceName = obj.province
                        if (provinceElementName === provinceName) {
                            var cities = obj.cities
                            $.each(cities, function (index, obj) {
                                var cityName = obj.city;
                                $city.append(`<option value="${cityName}">${cityName}</option>`)

                            })
                        }
                    })
                })
            })
        </script>
    </body>

</html>

搜索框提示案例

<!DOCTYPE html>
<html lang="en">

    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
        <style>
            .container #search {
                width: 300px;
            }

            .container .alert {
                width: 300px;
                border: 1px solid lightgray;
                display: none;
            }

            .container .alert ul {
                list-style: none;
                padding: 0;
                margin: 0;
            }
        </style>
    </head>

    <body>
        <div class="container">
            <input type="text" id="search">
            <div class="alert">
                <ul class="tip">
                    <li>前端666</li>
                    <li>前端666</li>
                </ul>
            </div>
        </div>
        <script>
            $('#search').bind('input', function (e) {
                var inputValue = $(this).val()
                $.getJSON('data/server4.json', function (data) {
                    $('.tip').empty()
                    $.each(data, function (index, obj) {
                        console.log(index, obj);
                        if (index === inputValue) {
                            $('.alert').show()
                            $.each(obj, function (i, o) {
                                $('.tip').append(`<li>${o}</li>`)
                            })
                        }
                    })
                })
            })
        </script>
    </body>

</html>

异步提交表单的步骤

获取表单组件的内容
根据表单数据构建请求数据
通过Ajax异步提交

表单序列化

serialize()方法将表单组件对应的数据值序列化为指定格式的字符串内容。
serializeArray()方法将表单组件对应的数据值序列化为JSON格式的数据内容。

表情需对需要获取的值设置name属性

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

</head>

<body>
    <form action="#">
        <input type="text" name="search">
        <button type="submit">Submit</button>
    </form>
    <script>
        $('button').on('click', function (e) {
            e.preventDefault()
            var data1 = $('form').serialize()
            var data2 = $('form').serializeArray()
            console.log(data1);
            console.log(data2);
        })
    </script>
</body>

</html>