脚本宝典收集整理的这篇文章主要介绍了Ajax提交数据，脚本宝典觉得挺不错的，现在分享给大家，也给大家做个参考。
背景
- 在业务上面使用到了ajax上传图片，采用的方式是提供一个公用的api进行图片上传，然后返回图片的在服务器的url，这样在其他地方使用到时，直接提交图片的url，而不是图片资源，避免影响应能和体验，也方便后期切换（如果后期采用了第三方图片服务，或者对图片需要进行处理，只要改造这个接口就好了）。
-
使用Ajax提交表单数据（包含上传文件）有两种形式
-
优缺点
FormData简介
The FormData object lets you compile a set of key/value pairs to send using XMLHttPRequest. IT is primarily intended for use in sending form data, but can be used indePEndently From forms in order to transmit keyed data. The transmitted data is in the same format that the form's submit() method would use to send the data if the form's encoding type were set to multipart/form-data.大致意思是你可以将数据使用FormData对象编译成键值对形式，然后使用XMLHttpRequest技术向后端发送数据。主要是用来发送form表单数据，也可以发送带键数据。这种形式传输的数据和一个enctype属性为multipart/form-data并且采用submit()方法提交的form表单传输的数据格式相同。
Ajax使用FormData提交数据
只是简单的示范一下文件上传，表单数据类似，不写例子了。
Ajax上传文件-带form标签的FormData提交
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>测试</title>
</head>
<body>
<form id="upload" method="post">
<input id="file" type="file" name="file"/>
<input id="img" type="hidden"/>
<input type="submit" value="上传图片">
</form>
<script type="text/javascript" src="https://cdn.bootcss.COM/jquery/3.3.1/jquery.min.js"></script>
<script type="text/javascript">
var BASE_URL = '../'
$(document).ready(function(){
$('#file').on('change', function() {
var formData = new FormData($('#upload')[0])
$.ajax({
url: BASE_URL + 'api/upload',
type: 'post',
cache: false,
data: formData,
processData: false,
contentType: false,
success: function(res) {
console.log(res)
}
})
})
})
</script>
</body>
</html><?php
print_r($_FILE);exit();
?>特点：form表单提交,带有<form>标签，enctype="multipart/form-data"不设置也可以。
Ajax不带form标签的FormData提交