jQuery 中的 Ajax

2022/1/28 6:08:43

本文主要是介绍jQuery 中的 Ajax,对大家解决编程问题具有一定的参考价值,需要的程序猿们随着小编来一起学习吧!

@

目录
  • 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(); 
})



这篇关于jQuery 中的 Ajax的文章就介绍到这儿,希望我们推荐的文章对大家有所帮助,也希望大家多多支持为之网!


扫一扫关注最新编程教程