saber 酱的抱枕

Fly me to the moon

04/18
2023
软件

手动编码 multipart/form-data 格式的数据

自动发送的 multipart/form-data

在浏览器中,如果 POST 请求的 body 数据是 FormData 类型,那么浏览器会自动把数据以 multipart/form-data 格式编码并发送,不需要我们进行额外处理。

const formElement = document.querySelector('#form')
const formData = new FormData(formElement)
fetch('/post', {
  method: 'post',
  body: formData,
})

multipart/form-data 编码方式可以用于上传文件。不过即使不上传文件,因为 FormData 用起来很便捷,所以我也习惯使用它。

但是极少数情况可能需要我们自己把表单数据编码成 multipart/form-data 格式,于是我就尝试了一番。

Read More →

手动编码 multipart/form-data 格式的数据

07/7
2016
学习

JavaScript表单序列化

平时我们表单的提交多数是用action来指定提交到的文件,但这样会产生页面的刷新。用ajax提交可以避免刷新,但是需要我们自己组织要提交的数据。这就是表单序列化了。

jQuery有个serialize方法来做表单序列化,语法如下:

$(selector).serialize();

序列化之后,表单里需要提交的值会被组织成字符串,形如:

"name=124&company=baidu.com&fav=1,2,3"

如果里面有汉字之类,会自动进行url编码。表单序列化完全模拟了浏览器提交时的数据,这样我们就可以用ajax来提交表单了。

如一个id为“yy”的表单,它的提交的地址是"/plus/diy.php",提交按钮id是submit。那么表单序列化并提交的代码如下:

$("#submit").click(function(event) {
	event.preventDefault();
	$.ajax({
		type: "post",
		url: "/plus/diy.php",
		data: $("#yy").serialize(),
		success: function() {
			alert("信息提交成功。");
		}
	})
})

注意用preventDefault()阻止浏览器默认事件(就是跳转到action页面,即使你没写action属性也会跳转的)。

后台对提交数据的处理和用action提交时的数据是一致的。
Read More →

JavaScript表单序列化