ICode9

精准搜索请尝试: 精确搜索
首页 > 其他分享> 文章详细

jQuery 中的 Ajax

2022-01-28 01:31:08  阅读:125  来源: 互联网

标签:jQuery function 请求 ajax 表单 Ajax 函数


@

目录


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,function,请求,ajax,表单,Ajax,函数
来源: https://www.cnblogs.com/gh-StudyNotes/p/15851736.html

本站声明: 1. iCode9 技术分享网(下文简称本站)提供的所有内容,仅供技术学习、探讨和分享;
2. 关于本站的所有留言、评论、转载及引用,纯属内容发起人的个人观点,与本站观点和立场无关;
3. 关于本站的所有言论和文字,纯属内容发起人的个人观点,与本站观点和立场无关;
4. 本站文章均是网友提供,不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属;如您发现该文章侵犯了您的权益,可联系我们第一时间进行删除;
5. 本站为非盈利性的个人网站,所有内容不会用来进行牟利,也不会利用任何形式的广告来间接获益,纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

专注分享技术,共同学习,共同进步。侵权联系[81616952@qq.com]

Copyright (C)ICode9.com, All Rights Reserved.

ICode9版权所有