$.ajax()

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

type：设置请求方式。

url：设置请求地址，访问同源服务器时，协议域名端口部分可以省略。

data：需要发送请求参数时设置，可选

如果指定参数的类型是contentType: 'application/x-www-form-urlencoded' 请求参数设置为：

data: {data: 'name=zhangsan&age=20'}

或

data: { name: 'zhangsan', age: '20' }

如果指定参数的类型是contentType: 'application/json' 请求参数设置为：

data: JSON.stringify({name: 'zhangsan', age: '20'})

beforeSend: function () {return false}: 设置在请求发送之前需要做些什么，可选。

success: function (response) {}：设置请求返回成功后做些什么。

error: function (xhr) {}：设置请求发生错误后该做些什么，可选。

作用二 ：发送jsonp请求。

$.ajax({
    url: 'http://www.example.com',
    dataType: 'jsonp',
    jsonp: 'cb',
    // 指定函数名称，如果不想用success里面的函数，可以自己在客户端准备好一个需要的函数，下面写函数名
    jsonCallback: 'fnName',
    success: function (response) {} 
})

url：设置请求地址。

dataType: 'jsonp',：申明发送的是jsonp请求，必需。

jsonp: 'cb'：地址后面的需要传递给服务器的函数名称，默认值是callback，或者修改成服务器端规定好的名称，可选。

jsonCallback: 'fnName'：指定函数名称，如果不想用success里面的函数，可以自己在客户端准备好一个需要的函数，传入函数名，一般不用。

success: function (response) {}：设置请求返回成功后做些什么。

二、serialize方法

作用：将表单中的数据自动拼接成字符串类型的参数，与FormData功能相同，但FormData是HTML5提供的，存在兼容问题

var params = $('#form').serialize();//返回值就是这个形式name=zhangsan&age=30

但是，很有时候我们需要的数据格式时对象的形式，因此可以封装一个函数来将表单中用户输入的内容转换成对象的形式：

封装

function serializeObject (obj) {
	// 处理结果对象
	var result = {};
	// [{name: 'username', value: '用户输入的内容'}, {name: 'password', value: '123456'}]
	var params = obj.serializeArray();
	// 循环数组 将数组转换为对象类型
	$.each(params, function (index, value) {
		result[value.name] = value.value;
	})
	// 将处理的结果返回到函数外部
	return result;
}

调用

<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;
	});
</script>

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

设置请求地址，访问同源服务器时，协议域名端口部分可以省略，需要请求参数时，格式还可以写成'name=zhangsan&age=30'。

jQuery中Ajax全局事件

一、全局事件

只要页面中有Ajax请求被发送，对应的全局事件就会被触发，一定要绑定在document上面。

// 当页面中有ajax请求发送时触发
$(document).on('ajaxStart', function () {
	  console.log(star);
})
// 当页面中有ajax请求完成时触发
$(document).on('ajaxComplete', function () {
	console.log(end); 
})

二、NProgress插件

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

引入文件

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

添加触发事件

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

jQuery中的Ajax-学习笔记