@

目录

• 1. 简介
• 2. jQuery 中发起 Ajax 请求常用方法
  • $.ajaxPrefilter()
  • $.get()
    • $.get() 不带参数 请求
    • $.get() 带参数 请求
  • $.post()
    • $.post()向服务器提交数据
  • $.ajax()
    • ①发送Ajax请求
      • 基本用法
      • 请求参数 type 说明
      • 请求参数 data 说明
    • ②发送jsonp请求
• 3. jQuery中 用Ajax提交表单数据
  • ① 监听表单提交事件
  • ② 阻止表单默认提交行为
  • ③ 快速获取表单中的数据
    • jQuery serialize()
    • jQuery serializeArray()
    • 表单数据获取自定义函数 serializeObject()
  • ④ 表单重制
• 4. jQuery中 用Ajax实现文件上传
  • ① 定义UI结构
  • ② 验证是否选择了文件
  • ③ 向FormData中追加文件
  • ③ 使用jQuery发起上传文件的请求
  • ④ jQuery实现loading效果
    • ajaxStart(callback)
    • ajaxStop(callback)
• 5. 全局事件

---

1. 简介

浏览器中提供的 XMLHttpRequest 用法比较复杂，所以 jQuery 对 XMLHttpRequest 进行了封装，提供了一系列 Ajax 相关的函数，极大地降低了 Ajax 的使用难度。

graph TD A[XMLHttpRequest] --> B[jQuery中的Ajax] B --> C[$.get方法] B --> D[$.post方法] B --> E[$.ajax方法]

2. jQuery 中发起 Ajax 请求常用方法

$.ajaxPrefilter()

/*
每次调用jquery的api发送ajax请求时都会先自动调用该方法
在这个函数中，可以拿到我们给Ajax提供的配置对象 options
从而能够统一的 为ajax请求 预先设置配置对象
*/
$.ajaxPrefilter( function( options ) {
	// options.url; //配置对象中的 url 属性
}

官方中文文档

$.get()

jQuery 中 $.get() 函数的功能单一，专门用来发起 get 请求，从而将服务器上的资源请求到客户端来进行使用。$.get() 函数的语法如下：

$.get(url, [data], [callback])

/*eg:
response: 服务器端返回的数据*/
$.get('http://www.example.com', {name: 'zhangsan', age: 30}, function (response) {})

参数说明

参数名	参数类型	是否必选	说明
url	string	是	要请求的 资源地址
data	object	否	请求资源期间要携带的参数
callback	function	否	请求成功时的回调函数

$.get() 不带参数 请求

使用 $.get() 函数发起不带参数的请求时，直接提供请求的 URL 地址和请求成功之后的回调函数即可，示例代码如下：

$.get('http://www.liulongbin.top:3006/api/getbooks', function(res) {
	console.log(res) // 这里的 res 是服务器返回的数据
})

$.get() 带参数 请求

使用 $.get() 函数发起带参数的请求时，示例代码如下：

$.get('http://www.liulongbin.top:3006/api/getbooks', { id: 1 }, function(res) {
	console.log(res)
})

$.post()

jQuery 中 $.post() 函数的功能单一，专门用来发起 post 请求，从而向服务器提交数据。
$.post() 函数的语法如下：

$.post(url, [data], [callback])

//eg:
$.post('http://www.example.com', {name: 'lisi', age: 22}, function (response) {})

参数说明

参数名	参数类型	是否必选	说明
url	string	是	提交数据的地址
data	object	否	要提交的数据
callback	function	否	数据提交成功时的 回调函数

$.post()向服务器提交数据

使用 $post() 向服务器提交数据的示例代码如下：

$.post(
	'http://www.liulongbin.top:3006/api/addbook', // 请求的URL地址
	{ bookname: '水浒传', author: '施耐庵', publisher: '上海图书出版社' }, // 提交的数据
	function(res) { // 回调函数, res: 服务器返回的数据
		console.log(res)
	}
)

$.ajax()

相比于 $.get() 和 $.post() 函数，jQuery 中提供的 $.ajax() 函数，是一个功能比较综合的函数，它允许我们对Ajax 请求进行更详细的配置。

①发送Ajax请求

基本用法

$.ajax({
	// 请求方式
	type: 'get',
	// 请求地址
	url: 'http://www.example.com',
	// 请求参数
	data: { name: 'zhangsan', age: '20' },
	// 指定传入服务器的参数格式类型, 默认值为'application/x-www-form-urlencoded'
	contentType: 'application/x-www-form-urlencoded',
	//contentType: 'application/json', 指定参数格式为json对象字符串
	
	// 设置请求头字段 
	headers: {
      Authorization: localStorage.getItem('token') || ''
    },
	//回调函数, 在请求发送之前被调用
	beforeSend: function () {
		//当达到某种条件后, 通过如下语句来取消请求发送
		return false
	},
	
	// 回调函数, 在请求成功服务器端返回数据时被调用, response: 服务器端返回的数据
	// $.ajax()内部会根据服务器端在响应头中设置的返回数据类型, 自动将返回的数据转换为对应的类型
	success: function (res) {},
	
	// 回调函数, 在请求失败时会被调用; xhr:ajax对象, 包含错误信息
	error: function (xhr) {}

	// 无论请求失败或成功，当请求完成后会执行该函数
	 complete: function(res) {
	 	console.log(res)
	 }
});

请求参数 type 说明

• 使用 $.ajax() 发起 GET 请求时，只需要将 type 属性的值设置为 'GET' 即可：

  $.ajax({
  	type: 'GET', // 请求的方式
  	url: 'http://www.liulongbin.top:3006/api/getbooks', // 请求的 URL 地址
  	data: { id: 1 },// 这次请求要携带的数据
  	success: function(res) { // 请求成功之后的回调函数
  		console.log(res)
  	}
  })
  

• 使用 $.ajax() 发起 POST 请求时，只需要将 type 属性的值设置为 'POST' 即可：

$.ajax({
	type: 'POST', // 请求的方式
	url: 'http://www.liulongbin.top:3006/api/addbook', // 请求的 URL 地址
	data: { // 要提交给服务器的数据
		bookname: '水浒传',
		author: '施耐庵',
		publisher: '上海图书出版社'
	},
	success: function(res) { // 请求成功之后的回调函数
		console.log(res)
	}
})

请求参数 data 说明

• $.ajax()中默认的请求参数格式为contentType: 'application/x-www-form-urlencoded'，data可以是 object 或者 String，如下

  $.ajax({
  	data: {
  		name: "张三",
  		age: 14
  	}
  	//或者 可直接传递urlencoded格式参数 字符串
  	data: "name=zhangsan&age=14";
  })
  

  上述两种data格式在默认参数格式下，都会被$.ajax()内部转换为 "name=zhangsan&age=14"
  这种字符串格式传递给服务器

• 当请求参数被指定为contentType: 'application/json'，那么data的格式就只能是 json字符串

  var parms = {name: "zhangsan", age: 15};
  $.ajax({
  	contentType: 'application/json',
  	data: JSON.stringify(parms)
  })
  

  上述请求参数将会以 json字符串的形式 '{"name":"wangwu","age":300}' 传递给服务器

• 当请求参数 是类型为FormData 格式的数据，需要添加如下的配置项

  var fd = new Form(document.querySelected('form'));
  $.ajax({
  	method: 'POST',
      url: '/my/article/add',
      data: fd,
      // 注意：如果向服务器提交的是 FormData 格式的数据，
      // 必须添加以下两个配置项
      contentType: false,
      processData: false,
      success: function(res) {}
  })
  

②发送jsonp请求

$.ajax()内部自动处理的<script>标签的创建与销毁，以及src属性的url地址的拼接，传递函数的参数名默认为 callback ，函数体为success回调函数，服务端需要手动响应callback函数的调用并传递数据参数

$.ajax({
   url: 'http://www.example.com',
   // 指定当前发送jsonp请求
   dataType: 'jsonp',
   // 修改callback参数名称
   jsonp: 'cb',
   // 指定函数名称，请求成功执行该函数，不会再执行默认函数
   jsonCallback: 'fnName',
   // 请求成功默认执行的回调函数
   success: function (response) {}
})

example:

• 不指定callback参数名和jsonCallback函数名

// 客户端
$.ajax({
	url: '/jsonp',
	dataType: 'jsonp',
	success: function (response) {
		console.log(response) // 浏览器控制台输出 {name: 'lisi', age: 50} 
	}
})

// 服务端
app.get('/jsonp', (req, res) => {
	res.jsonp({
		name: 'lisi',
		age:50
	})
});

请求地址：http://localhost/jsonp?callback=jQuery331004305437716135185_1632277196826&_=1632277196827
服务端响应值：/**/ typeof jQuery331004305437716135185_1632277196826 === 'function' && jQuery331004305437716135185_1632277196826({"name":"lisi","age":50});

• 指定callback参数名和jsonCallback函数名

function fn(response){
	console.log(response); // 浏览器控制台输出 {name: 'zhaoliu'}
}

$.ajax({
	// 客户端
	url: '/jsonp',
	dataType: 'jsonp',
	jsonp: 'cb',
	jsonCallback: 'fn',
	success: function (response) {
		console.log(response) // 浏览器控制台输出 {name: 'zhaoliu'} 
	}
})

app.get('/jsonp', (req, res) => {
	const cb = req.query.cb
	const data = cb+"({name: 'zhaoliu'})"
	res.send(data);
});

注意：success 回调函数在请求成功后依然会执行

请求地址：http://localhost/jsonp?cb=jQuery33105182463427317079_1632278123086&_=1632278123087
服务端响应值：jQuery33105182463427317079_1632278123086({name: 'lisi'})

3. jQuery中 用Ajax提交表单数据

form表单的基本使用

① 监听表单提交事件

在 jQuery 中，可以使用如下两种方式，监听到表单的提交事件：

  <form action="/login" id="form1">
    <input type="text" name="user_name" />
    <input type="password" name="password" />
    <button type="submit">提交</button>
  </form>

$('#form1').submit(function(e) {
	alert('监听到了表单的提交事件')
})

$('#form1').on('submit', function(e) {
	alert('监听到了表单的提交事件')
})

② 阻止表单默认提交行为

当监听到表单的提交事件以后，可以调用事件对象的 event.preventDefault() 函数，来阻止表单的提交和页面的跳转，示例代码如下：

$('#form1').submit(function(e) {
// 阻止表单的提交和页面的跳转
e.preventDefault()
})
$('#form1').on('submit', function(e) {
// 阻止表单的提交和页面的跳转
e.preventDefault()
})

③ 快速获取表单中的数据

在使用如下 函数快速获取表单数据时，必须为每个表单元素添加 name 属性！

jQuery serialize()

作用：一次性将表单中的数据自动拼接成 字符串类型的参数 并返回出来

//语法格式
$(selector).serialize()

<form id="form">
		<input type="text" name="username">
		<input type="password" name="password">	
</form>
<script>
var params = $('#form').serialize();
//返回一个字符串  "name=zhangsan&age=30"
</script>

jQuery serializeArray()

作用：将表单中所有表单项以对象的格式添加到一个 数组 中并返回出来

<form id="form">
		<input type="text" name="username">
		<input type="password" name="password">	
</form>
<script>
var ary = $('#form').serializeArray()
// 返回一个数组 [{name: 'username', value: 'zhangsan'}, {name:'password', value='123456'}] 
</script>

表单数据获取自定义函数 serializeObject()

该函数利用现有的 serializeArray() 进一步优化获取表单数据的返回值，

/* 
作用: 将表单中用户输入的内容转换为对象类型

参数obj: jQuery封装的表单对象

返回值: 一个对象， 内部存储了表单数据
	{表单项name：表单项value, ...} 
*/
function serializeObject (obj) {
	// 处理结果对象
	var result = {};
	// [{name: 'username', value: '用户输入的内容'}, {name: 'password', value: '123456'}]
	var params = obj.serializeArray();

	/* $.each(parms1, parms2) 
	作用: jquery中 $.each用来遍历对象或数组
	parms1: 要被遍历的数组或对象
	parms2: 每次遍历要执行的函数
		index: 数组元素索引 或者 对象属性名
		value: 数组元素值 或者 对象属性值
	*/
	// 循环数组 将数组转换为对象类型
	$.each(params, function (index, value) {
		result[value.name] = value.value;
	})
	// 将处理的结果返回到函数外部
	return result;
}

jQuery 遍历 - each() 方法 (w3school.com.cn)

使用举例

<form id="form">
		<input type="text" name="username">
		<input type="password" name="password">	
		<button type="submit">提交</button>
</form>
<script>
	$('#form').on('submit', function(e){
		//调用自定义函数 serializeObject 获取表单数据
		let formValue = serializeObject($('#form'));
		console.log(formValue); // {username: "zhangsan", password: "123456"}
	})
</script>

④ 表单重制

一般表单数据通过ajax提交过后需要重置表单数据
form.reset - Web API 接口参考 | MDN (mozilla.org)
jQuery reset()重置表单_小小布的程序世界-CSDN博客

4. jQuery中 用Ajax实现文件上传

① 定义UI结构

<!-- 导入 jQuery -->
<script src="./lib/jquery.js"></script>
<!-- 文件选择框 -->
<input type="file" id="file1" />
<!-- 上传文件按钮 -->
<button id="btnUpload">上传</button>

② 验证是否选择了文件

$('#btnUpload').on('click', function() {
	// 1. 将 jQuery 对象转化为 DOM 对象，并获取选中的文件列表
	var files = $('#file1')[0].files;
	// 2. 判断是否选择了文件
	if (files.length <= 0) {
		return alert('请选择图片后再上传！‘)
	}
})

③ 向FormData中追加文件

// 向 FormData 中追加文件
var fd = new FormData()
fd.append('avatar', files[0])

③ 使用jQuery发起上传文件的请求

$.ajax({
	method: 'POST',
	url: 'http://www.liulongbin.top:3006/api/upload/avatar',
	data: fd,
	// 不修改 Content-Type 属性，使用 FormData 默认的 Content-Type 值
	contentType: false,
	// 不对 FormData 中的数据进行 url 编码，而是将 FormData 数据原样发送到服务器
	processData: false,
	success: function(res) {
	console.log(res)
	}
})

④ jQuery实现loading效果

ajaxStart(callback)

Ajax 请求开始时，执行 ajaxStart 函数。可以在 ajaxStart 的 callback 中显示 loading 效果，示例代码如下：

// 自 jQuery 版本 1.8 起，该方法只能被附加到文档
$(document).ajaxStart(function() {
	$('#loading').show()
})

注意： $(document).ajaxStart() 函数会监听当前文档内所有的 Ajax 请求。

ajaxStop(callback)

Ajax 请求结束时，执行 ajaxStop 函数。可以在 ajaxStop 的 callback 中隐藏 loading 效果，示例代码如下：

// 自 jQuery 版本 1.8 起，该方法只能被附加到文档
$(document).ajaxStop(function() {
	$('#loading').hide()
})

5. 全局事件

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

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

比如，利用全局事件配合 NProgress.js 来完成请求时的进度条展示功能

$(document).on('ajaxStart', function(){
	console.log('ajax请求开始');
	NProgress.start(); 
})

$(document).on('ajaxComplete', function(){
	console.log('ajax请求结束');
	NProgress.done(); 
})