专栏首页小康的自留地三、jQuery中的Ajax

三、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>

异步提交表单的步骤

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

表单序列化

  1. serialize()方法 将表单组件对应的数据值序列化为指定格式的字符串内容。
  2. 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>

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • 一、Axios基础

    Dreamy.TZK
  • 六、中间件与跨域

    在路由相应之前就会执行中间件的内容,例如在中间件中进行赋值,这种就可以在路由执行时使用这个值。

    Dreamy.TZK
  • 一、MongoDB的安装

    Dreamy.TZK
  • Vue 3 入门基础知识

    本章节实验主要讲解 vue 的最基本的知识点,在讲解知识点之前,我们需要介绍一下 vue.js:

    公众号---志学Python
  • TensorFlow应用实战 | 编写训练的python文件

    一个错误的个人使用,因为我的TensorFlow版本较老。keras并没有被集成进来。

    用户1332428
  • ld: cannot find -lrt 解决方法

    今天尝试安装percona-data-recovery-tool-for-innodb-0.5做数据库恢复测试的时候,make时报错如下:

    二狗不要跑
  • hanlp自然语言处理包的基本使用--python

    hanlp拥有:中文分词、命名实体识别、摘要关键字、依存句法分析、简繁拼音转换、智能推荐。

    IT小白龙
  • “智慧校园”到底怎么做,才能俘获高校的“芳心”

    十年前,浙江大学提出了一个让人激动的概念——智慧校园,在这幅蓝图中,校务管理透明高效、校园生活方便周到、网络科研创新发展。十年间,各种智慧校园产品如雨后春笋般涌...

    数据猿
  • Python结合jquery Ajax 的实例

    jQuery对Ajax的操作进行了封装。jQuery中.ajax()属于最底层的方法。 先来看一个简单的例子:

    赵云龙龙
  • 模型性能提升操作

    考虑特征重要度的因素。遵循一个原则:特征重要度越高,对这一特征下的空缺值容忍程度越低。

    Bo_hemian

扫码关注云+社区

领取腾讯云代金券