表单提交form提交和ajax提交

、使用场景：

安全性都一样，都是发送的http协议。安全性与提交文件的业务处理（格式检测，防注入）有关，与提交方式无关。

一般登录用表单提交，点击提交触发submit事件，一般会使页面发生跳转，页面的跳转等行为的控制往往在后端，后端控制页面的跳转及数据的传递；但是某些时候不希望页面跳转，或者说想要将控制权放在前端，通过js来操作页面的跳转或数据变化，一般这种异步操作，都会使用ajax。

但是Ajax会有个隐藏的问题，即浏览器不保存密码，不符合用户习惯。理想的方式：建立隐藏的iframe，把form标签的target指向iframe，然后检测iframe的状态。

2、比较：

（1）ajax在提交、请求、接收时，都是异步进行，网页不需要刷新，只刷新页面局部，不关心也不影响页面其他部分的内容。

Form提交则是新建一个页面，哪怕是提交给自己本身的页面，也需要刷新，为了维持页面用户对表单的状态改变，要在控制器和模板之间传递更多参数以保持页面状态。

（2）ajax提交时，是在后台新建一个请求。

Form却是放弃本页面，然后再请求。

（3）ajax必须要用js来实现，存在调试麻烦、浏览器兼容问题，而且不启用js的浏览器，无法完成操作。

Form表单是浏览器自带的，无论是否开启js，都可以提交表单。

（4）ajax在提交、请求、接收时，整个过程都需要使用程序来对其进行数据处理。

Form表单提交，是根据表单结构自动完成，不需要代码干预。用submit提交。

3、其他方面：

关于输入内容的校验，ajax可以在获取到元素内容用程序判断；form表单的属性中有校验的字段，easyui，jeecg等中都封装，用户只需添加正则表达式的校验规则。

4、例：

（1）使用form提交

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<html>

<head>

<title>login test</title>

</head>

<body>

</form>

</div>

</body>

</html>

景

在业务上面使用到了ajax上传图片，采用的方式是提供一个公用的api进行图片上传，然后返回图片的在服务器的url，这样在其他地方使用到时，直接提交图片的url，而不是图片资源，避免影响应能和体验，也方便后期切换（如果后期采用了第三方图片服务，或者对图片需要进行处理，只要改造这个接口就好了）。
使用Ajax提交表单数据（包含上传文件）有两种形式

using only AJAX
using the FormData API

优缺点

Using the FormData API is the simplest and fastest, but has the disadvantage that data collected can not be stringified.
Using only AJAX is more complex, but typically more flexible and powerful.

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提交

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>测试</title>
</head>
<body>
 <input id="file" type="file" name="file"/>
 <input id="img" type="hidden"/>
 <input type="submit" value="上传图片">
<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() {
 console.log(this.files)
 var formData=new FormData()
 formData.append("file", this.files[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>标签，基本使用场景中使用的是这种。

Ajax不使用FormData提交数据

从参考2来看，上传文件需要使用使用FileReader对象,并且Ajax不使用FormData提交数据略复杂，幸亏有一些大咖封装了一下，比如官方提供了一个A little vanilla framework（一点香草？？？？？？这个使用原生写的，不是封装，，，），再比如ajaxFileUpload(github地址是参考5，官方有示例，试了一下，妥妥的支持IE6..)。

感受

FormData是HTML5新增的属性，可能在兼容浏览器上面会抛弃一些古典（old）浏览器，不过简单;利用纯Ajax提交也还好，因为有很多现成的库，比如jquery,axios...从A little vanilla framework的示例（参考2）来看，基本是根据form表单的encypt形式，采用相应的方式发送数据。

参考

https://developer.mozilla.org/en-US/docs/Web/API/FormData/Using_FormData_Objects
https://developer.mozilla.org/en-US/docs/Web/API/XMLHttpRequest/Using_XMLHttpRequest#Submitting_forms_and_uploading_files
https://developer.mozilla.org/en-US/docs/Web/API/FileReader
https://www.cnblogs.com/zhuxiaojie/p/4783939.html
https://github.com/davgothic/AjaxFileUpload

言

有的时候在想，JSP页面提交数据到后台，可以被Servlet容器解析，然后获取到前台参数。操作成功后，后台可以重定向或者转发到其他页面去。但是，我如何在本页获知我已经上传成功，或者表达那内容提交成功的呢？

普通的html或者jsp控件本身是无法做到的，因为在你点击submit提交数据以后，浏览器就等待response了，剩下的用户无从干预。

其实，js很容易就能做到这点。

一个修改头像的例子

<from action="" enctype="multipart/form-data" method="post">

<a>

<span>修改头像</span>

<input type="file" id="fileUp" accept="image/png,image/jpeg">

</a>

</from>

var fileM=document.querySelector("#fileUp");

$("#fileUp").on("change",function() {

//获取文件对象，files是文件选取控件的属性，存储的是文件选取控件选取的文件对象，类型是一个数组

var fileObj=fileM.files[0];

//创建formdata对象，formData用来存储表单的数据，表单数据时以键值对形式存储的。

var formData=new FormData();

formData.append('file', fileObj);

$.ajax({

url: "自己的后台的Url",

type: "post",

dataType: "json",

data: formData,

async: true,

cache: false,

contentType: false,

processData: false,

success: function (json_data) {

alert("上传成功！");

},
});
});

在点击"修改头像"的链接后，会打开一个文件选择窗选中图片后就会将其上传到服务器。

如果后台是tomcat，那么就可以从request域中拿到"file"键值对应的对象fileObj，开启流就能接收。

总结

在上面的例子中，formData对象可以添加任意类型的对象，例如string,file,array等等。

所以可以通过原生JS后者类似Jquery这类框架的选择器，将表单字段获取到，然后放入formData对象中，并且禁用表单的submit事件（表单禁用submit的方式太多了，这里就不赘述了，由读者自行百度~），由Ajax异步来提交表单，提交完成后可以接受后台的JSON反馈，然后告诉用户提交成功或者失败，由于什么原因失败！

不由的感叹一句，JS在Web开发中的地位真的是无可匹敌呀！

本文仅为学习交流所用，如有错疏，还望指正。喜欢本文可以收藏，或者点个关注，每天都有新鲜技术分享！

在线咨询

上一篇：FB开源人工智能框架ParlAI：可轻松训练评估对话
下一篇：实战笔记—滑动验证码攻防对抗

您的项目需求

*请认真填写需求信息，我们会在24小时内与您取得联系。

整合营销服务商

表单提交form提交和ajax提交

言

一个修改头像的例子

总结

您的项目需求