jQuery 封装Ajax函数、FormData对象

最新推荐文章于 2023-05-28 23:07:33 发布

YuLong~W

最新推荐文章于 2023-05-28 23:07:33 发布

阅读量668

点赞数 5

分类专栏： Node.js 文章标签： ajax jquery javascript FromData对象 node.js

本文链接：https://blog.csdn.net/weixin_45654582/article/details/119813865

版权

Node.js 专栏收录该内容

13 篇文章 2 订阅

订阅专栏

文章目录

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>