08 $.ajax()

时间：2020-06-24 11:57:31 收藏：0 阅读：58

1. $.ajax()

1.1 $.ajax()方法概述

作用：发送Ajax请求。

$.ajax({
     type: ‘get‘,  // 请求方式
     url: ‘http://www.example.com‘, // 请求地址
     data: { name: ‘zhangsan‘, age: ‘20‘ }, // 请求参数
     contentType: ‘application/x-www-form-urlencoded‘, //请求参数格式
     beforeSend: function () { 
         return false // 请求发送前执行函数，可以用来验证参数是否正确
     },
     success: function (response) {}, // 请求成功
     error: function (xhr) {} // GG
});

演示

<body>
    <button id="btn">发送请求</button>
    <script src="./js/jquery.min.js"></script>
    <script>
        $(‘#btn‘).on(‘click‘, function() {
            $.ajax({
                // 请求方式
                type: ‘post‘,
                // 请求地址
                url: ‘http://127.0.0.1:8080/base‘,
                // 请求成功以后函数被调用
                success: function(response) {
                    // response为服务器端返回的数据
                    // 方法内部会自动将json字符串转换为json对象
                    console.log(response);
                },
                // 请求失败以后函数被调用
                error: function(xhr) {
                    console.log(xhr)
                }
            })
        });
    </script>
</body>

作用：发送jsonp请求
$.ajax({
url: ‘http://www.example.com‘,
// 指定当前发送jsonp请求
dataType: ‘jsonp‘,
// 修改callback参数名称
jsonp: ‘cb‘,
// 指定函数名称
jsonCallback: ‘fnName‘,
success: function (response) {}
})

1.2 serialize方法

作用：将表单中的数据自动拼接成字符串类型的参数

var params = $(‘#form‘).serialize();
// name=zhangsan&age=30

演示

<body>
    <form id="form">
        <input type="text" name="username">
        <input type="password" name="password">
        <input type="submit" value="提交">
    </form>
    <script src="/js/jquery.min.js"></script>
    <script type="text/javascript">
        $(‘#form‘).on(‘submit‘, function() {
            // 将表单内容拼接成字符串类型的参数
            // var params = $(‘#form‘).serialize();
            // console.log(params)
            serializeObject($(this));
            return false;
        });

        // 将表单中用户输入的内容转换为对象类型
        function serializeObject(obj) {
            // 处理结果对象
            var result = {};
            // [{name: ‘username‘, value: ‘用户输入的内容‘}, {name: ‘password‘, value: ‘123456‘}]
            // 序列化数组
            var params = obj.serializeArray();
            console.log(params);

            // 循环数组 将数组转换为对象类型
            $.each(params, function(index, value) {
                    result[value.name] = value.value;
                })
                // 将处理的结果返回到函数外部
            // console.log(result);

            return result;
        }
    </script>
</body>

2. $.get()、$.post

作用：$.get方法用于发送get请求，$.post方法用于发送post请求。

$.get(‘http://www.example.com‘, {name: ‘zhangsan‘, age: 30}, function (response) {}) 
$.post(‘http://www.example.com‘, {name: ‘lisi‘, age: 22}, function (response) {})

3. jQuery中Ajax全局事件

3.1 全局事件

只要页面中有Ajax请求被发送，对应的全局事件就会被触发

.ajaxStart()     // 当请求开始发送时触发
.ajaxComplete()  // 当请求完成时触发

3.2 NProgress

纳米级进度条

<link rel=‘stylesheet‘ href=‘nprogress.css‘/>
<script src=‘nprogress.js‘></script>

NProgress.start();  // 进度条开始运动 
NProgress.done();   // 进度条结束运动