jQuery中的Ajax

$.ajax()

$.ajax()方法概述

作用：发送Ajax请求。

 $.ajax({
     type: ‘get‘,//必须，请求类型
     url: ‘http://www.example.com‘,//必须，请求url
     data: { name: ‘zhangsan‘, age: ‘20‘ },//请求参数
     contentType: ‘application/x-www-form-urlencoded‘,//默认值，可选，发送数据所使用的类型
     beforeSend: function () { //可选，发送前调用
         return false//返回false则不发送，此函数可以做一些发送前的参数验证
     },
     success: function (response) {},//成功的回调函数，response根据响应类型自动转换
     error: function (xhr) {}//失败的回调函数
});

请求参数可以使用如下格式：

data: ‘name=zhangsan&age=20‘

服务器要求参数必须为json格式：

contentType: ‘application/json‘,//设置请求类型为json
JSON.stringify({name: ‘zhangsan‘, age: ‘20‘})//转为json字符串格式

serialize方法

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

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

serializeArray方法

var params = $(‘#form‘).serialize();
/* 返回格式：
[{
    name: "username",
    value: "admin"
}, {
    name: "password",
    value: "123456"
}] 
*/

jQuery没有提供方法将表单数据转为json对象格式，所以需要自己定义：

function serializeObject(obj) {
    //处理结果对象
    var result = {};
    var params = obj.serializeArray();
    //循环数组，将数组转为对象类型
    $.each(params, function(index, value) {
        result[value.name] = value.value;
    })
    //将处理结果对象返回
    return result;
}

发送jsonp请求

$.ajax({
    url: ‘http://www.example.com‘,
    // 指定当前发送jsonp请求
    dataType: ‘jsonp‘,
    // 修改callback参数名称,可选
    jsonp: ‘cb‘,
    // 指定函数名称,可选，默认jQuery会帮我们生成函数名
    jsonCallback: ‘fnName‘,
    success: function (response) {} 
})

$.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) {})

全局事件

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

说明：这两个函数在会页面所有ajax请求发送前后触发，最好把事件绑定给document才有效果

NProgress插件

地址：http://ricostacruz.com/nprogress/

官宣：纳米级进度条，使用逼真的涓流动画来告诉用户正在发生的事情！

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

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

插件示例

引入插件：

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

Ajax全局请求加载中示例：

// 当页面中有ajax请求发送时触发
$(document).on(‘ajaxStart‘, function () {
	NProgress.start() 
})

// 当页面中有ajax请求完成时触发
$(document).on(‘ajaxComplete‘, function () {
	NProgress.done() 
})

jQuery中的Ajax

原文：https://www.cnblogs.com/royal6/p/12594512.html