很久以前,form的post需要刷新页面。
后来有人发明了ajax,又有人开源了jquery,我们的form可以ajax post而无须刷新页面。
var url, method, data, element = $('form');
url = element.attr('action');
method = element.attr('method');
data = $(element[0].elements).serializeArray();
$.ajax({
url:url,
type:method,
data:data
});
但存在一个问题,不支持带有文件上传的form。
<form method="post" action="submit" enctype="multipart/form-data">
<input type="file" name="file"/>
</form>
因为,上传的文件对象无法被序列化。。。
这个问题需要新的DTD来解决,于是就有了FormData的对象。
https://developer.mozilla.org/zh-CN/docs/Web/API/XMLHttpRequest/FormData
XMLHttpRequest Level 2添加了一个新的接口FormData
利用FormData对象,我们可以通过JavaScript用一些键值对来模拟一系列表单控件,
我们还可以使用XMLHttpRequest的send()方法来异步的提交这个"表单",
比起普通的ajax,使用FormData的最大优点就是我们可以异步上传一个二进制文件。
所有主流浏览器的较新版本都已经支持这个对象了,
比如Chrome 7+、Firefox 4+、IE 10+、Opera 12+、Safari 5+。
注意!需要设置ajax参数{cache:false,processData:false,contentType:false}
查看ajax的文档 http://www.w3school.com.cn/jquery/ajax_ajax.asp
于是我们又可以愉快地 form-ajax-post 了
var url, method, data, element = $('form');
url = element.attr('action');
method = element.attr('method');
data = new FormData(element[0]);
$.ajax({
cache:false,processData:false,contentType:false,
url:url,
type:method,
data:data
});
相关推荐
Laravel开发-laravel-form-ajax-validation 使用Laravel请求对带有引导的表单进行Ajax验证
c#下post 发送 multipart/form-data和JSON数据
ajax-axios-url-form-serialize 插件
Ajax-pardot-form-ajax-handler.zip,为salesforce pardot表单设置ajax提交,而不是使用iframe发布,并处理结果。,ajax代表异步javascript和xml。它是多种web技术的集合,包括html、css、json、xml和javascript。它...
Power Builder 12.5,使用ole MSXML2.ServerXMLHTTP方式,对接WEB API,以选用JSON和x-www-form-urlencoded方式提交数据,POST/GET方式均可。
使用c#实现的HttpClient拼接multipart/form-data形式参数post提交数据,包含图片内容,有需要的可以下载,希望能帮到有需要的人,
Laravel开发-form-ajax-submit 使用Laravel请求对带有引导的表单进行Ajax验证
Laravel开发-laravel-form-ajax-validation-ponto 使用Laravel请求对带有引导的表单进行Ajax验证
Ajax-ajax-contact-form-wordpress.zip,wordpress的联系人表单,ajax代表异步javascript和xml。它是多种web技术的集合,包括html、css、json、xml和javascript。它用于创建动态网页,其中网页的小部分在不重新加载...
c#模拟post发送json和multipart/form-data格式
vue-ajax-form-component, 用于创建简单AJAX窗体的Vue.js 组件 vue-ajax-form-component用于创建简单AJAX表单的 Vue.js 插件组件。安装通过npm作为 vue-ajax-form-component 可用。 或者作为 inline 脚本包括在 ...
赠送jar包:feign-form-spring-3.8.0.jar; 赠送原API文档:feign-form-spring-3.8.0-javadoc.jar; 赠送源代码:feign-form-spring-3.8.0-sources.jar; 赠送Maven依赖信息文件:feign-form-spring-3.8.0.pom; ...
<form method="post" ENCTYPE="multipart/form-data"> file类型职务的普通参数传递到后台问题解决
js-ajax-form-submission-源码.rar
c#没有现成的multipart/form-data库,自己封的一个demo供参考。
Ajax-Spring-MVC-CRUD-form-submit-and-ajax.zip,spring mvc crud应用程序(springmvc、hibernate 4.x、bootstrap 3.x、jquery、mysql),ajax代表异步javascript和xml。它是多种web技术的集合,包括html、css、json...
Ajax-Codeigniter-3-Ajax-Form-Submission.zip,“codeigniter 3 ajax表单提交和验证教程”一集的源代码,ajax代表异步javascript和xml。它是多种web技术的集合,包括html、css、json、xml和javascript。它用于创建...
form-generator集成到本地项目
今天小编就为大家分享一篇基于form-data请求格式详解,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧