jQuery 封装Ajax函数FormData对象

Posted 2021-09-11 YuLong~W

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了jQuery 封装Ajax函数FormData对象相关的知识，希望对你有一定的参考价值。

文章目录

jQuery 封装Ajax函数
- $.ajax()方法
- $.get / post() 方法
FormData对象

jQuery 封装Ajax函数

$.ajax()方法

1、发送Ajax请求：

$('#btn').on('click', function () {
    $.ajax({
        // 请求方式
        type: 'post',
        // 请求地址
        url: '/user',
        // 向服务器端发送的请求参数
        // data：name=zhangsan&age=100  1、字符串格式发送
        // data: {
        // 	name: 'zhangsan',   2、对象格式发送
        // 	age: 100
        // },
        data: JSON.stringify({name:'zhangsan', age:100}),  //3、JSON字符串格式发送
        // 指定参数的格式类型
        contentType: 'application/json', //contentType: 'application/x-www-form-urlencoded',
        // 请求成功以后函数被调用
        success: function (response) {
            // response为服务器端返回的数据
            // 方法内部会自动将json字符串转换为json对象
            console.log(response);
        }
        error:function（err）{
        	console.log(err);
        }
    })
});

app.js文件中响应数据：

app.post('/user', (req, res) => {
	res.send(req.body)
});

2、发送JSONP请求：

$('#btn').on('click', function () {
    $.ajax({
        url: '/user',
        // 向服务器端传递函数名字的参数名称
        jsonp: 'cb',
        // 代表现在要发送的是jsonp请求
        dataType: 'jsonp';
        success: function (response) {
            console.log(response)
        }
    })
});

app.js文件中响应数据：

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

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

$('#form').on('submit', function () {
	 // 将表单内容自动拼接成字符串类型的参数
	 var params = $('#form').serialize();
	 console.log(params);    //name=zhangsan&age=30 字符串格式 	 
});

代码优化：将表单中的数据转化成对象类型的参数

封装相关的函数如下：

$('#form').on('submit', function () {
	// 表单内容拼接成字符串类型的参数
	// var params = $('#form').serialize();
	// console.log(params);   // name=zhangsan&age=30 字符串格式 
	serializeObject($(this));
	return false;
});
// 定义函数：将表单中用户输入的内容转换为对象类型
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;  // {name:'zhangsan',age:30}
}

$.get / post() 方法

$.get()方法

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

url:发送求地址
data:待发送 Key/value 参数（可以拼成键值对的对象进行发送）
callback:发送成功或者失败时回调函数
type:返回内容格式，xml、html、script、json、text、default

$.post()方法参数基本相同

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

FormData对象

FormData 对象的作用：

模拟HTML表单，相当于将HTML表单映射成表单对象，自动将表单对象中的数据拼接成请求参数的格式
异步上传二进制文件，比如图片文件、视频文件

FormData对象的使用：

注意：

Formdata 对象不能用于 get 请求，因为对象需要被传递到 send 方法中，而 get请求方式的请求参数只能放在请求地址的后面
服务器端 bodyParser 模块不能解析 formData 对象表单数据，需要使用 formidable 模块进行解析。

FormData对象的实例方法：

注意： set 方法与 append 方法的区别是，在属性名已存在的情况下，set 会覆盖已有键名的值，append会保留两个值。

FormData 二进制文件上传案例：

实现功能：

文件上传
进度条展示
上传后的即时预览

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<link rel="stylesheet" href="/assets/bootstrap/dist/css/bootstrap.min.css">
	<style type="text/css">
		.container {
			padding-top: 60px;
		}
		.padding {
			padding: 5px 0 20px 0;
		}
	</style>
</head>
<body>
	<div class="container">
		<div class="form-group">
			<label>请选择文件</label>
			<input type="file" id="file">
			<div class="padding" id="box">
				<!--<img src="" class="img-rounded img-responsive">-->
			</div>
			<div class="progress">
				<div class="progress-bar" style="width: 0%;" id="bar">0%</div>
			</div>
		</div>
	</div>
	<script type="text/javascript">
		// 获取文件选择控件
		var file = document.getElementById('file');
		// 获取进度条元素
		var bar = document.getElementById('bar');
		// 获取图片容器
		var box = document.getElementById('box');
		// 为文件选择控件添加onchanges事件
		// 在用户选择文件时触发
		file.onchange = function () {
			// 创建空的formData表单对象
			var formData = new FormData();
			// 将用户选择的文件追加到formData表单对象中
			formData.append('attrName', this.files[0]);
			// 创建ajax对象
			var xhr = new XMLHttpRequest();
			// 对ajax对象进行配置
			xhr.open('post', 'http://localhost:3000/upload');
			// 在文件上传的过程中持续触发
			xhr.upload.onprogress = function (ev) {
				// ev.loaded 文件已经上传了多少
				// ev.total  上传文件的总大小
				var result = (ev.loaded / ev.total) * 100 + '%';
				// 设置进度条的宽度
				bar.style.width = result;
				// 将百分比显示在进度条中
				bar.innerHTML = result;
			}
			// 发送ajax请求
			xhr.send(formData);
			// 监听服务器端响应给客户端的数据
			xhr.onload = function () {
				// 如果服务器端返回的http状态码为200
				// 说明请求是成功的
				if (xhr.status == 200) {
					// 将服务器端返回的数据显示在控制台中
					var result = JSON.parse(xhr.responseText);
					// 动态创建img标签
					var img = document.createElement('img');
					// 给图片标签设置src属性
					img.src = result.path;
					// 当图片加载完成以后
					img.onload = function () {
						// 将图片显示在页面中
						box.appendChild(img);
					}
				}
			}
			
		}
	</script>
</body>
</html>

以上是关于jQuery 封装Ajax函数FormData对象的主要内容，如果未能解决你的问题，请参考以下文章

通过jQuery Ajax使用FormData对象上传文件

使用带有 jquery $.ajax 调用的 Mozilla FormData

通过jQuery Ajax使用FormData对象上传文件

如何在 jQuery 中使用 Ajax 请求发送 FormData 对象？ [复制]