ajax c 提交form,使用ajax提交form表单,包括ajax文件上传
前言
使用ajax请求数据,很多人都会,比如说:
$.post(path,{data:data},function(data){
...
},"json");
又或者是这样的ajax
$.ajax({
url:"接口’",
type:"post",
data:{username:username},success:function(data){
alert("成功")
},
error:function(e){
alert("错误!!");
}
});
同样的,很多人也会。但是写的越多就越会发现,这样子虽然可以避免刷新页面,但是我们要写大量的js来到得数据:
var username = $("#username").val();
var password = $("#password").val();
...
如果数量少的话,那还没有什么,但是如果数据十分大的话,那就十分的麻烦,那有没有什么简单的方法呢?答案肯定有的!下面介绍两种方法,可以极大的提高开发人员的效率。
方法一:使用FormData对象
FormData对象是html5的一个对象,目前的一些主流的浏览器都已经兼容。额,如果你说ie8什么的,那我们还是来谈谈今天的天气吧,我没听见。呵呵,开个玩笑,不支持FormData的,可以使用方法二,下面会介绍。接着说FormData,它是一个html5的javascript对象,非常的强大。
FormData可以凭空创建一个对象,然后往这个对象里面添加数据,然后直接提交,不需要写一行html代码,如下:
var form =newFormData();
form.append("username","zxj");
form.append("password",123456);varreq =newXMLHttpRequest();
req.open("post", "${pageContext.request.contextPath}/public/testupload",false);
req.send(form);
这样就可以向浏览器发送表单数据了,或者也可以使用Jquery这样发送:
var form =new FormData();
form.append("username","zxj");
form.append("password",123456);
$.ajax({
url:"${pageContext.request.contextPath}/public/testupload",
type:"post",
data:form,
processData:false,
contentType:false,
success:function(data){
alert("成功")
}
});
这样也可以直接发送数据到后台。
你以为这就完了?不!这才刚开始呢!!
其次FormData还支持直接从html中的表单生成数据,就是在html页面中已经有数据了,然后FormData可以直接把这个表单的数据写入这个对象,然后直接提交给后台
代码如下,先给出html代码:
大家注意到没有,里面可是有文件的哦!
没错,FormData还支持困扰众多开发者已久的ajax的上传文件,以前我们上传文件,需要写一个表单直接刷新提交,但是这里不需要,下面给出提交代码:
function test (){
var form =new FormData(document.getElementById("tf"));
$.ajax({
url:"接口",
type:"post",
data:form,
processData:false,
contentType:false,
success:function(data){
alert("成功")
},
error:function(e){
alert("错误!!");
}
});
get();//此处为上传文件的进度条
}
就是这么简单,使用FormData,在构造这个对象的时候,把表单的对象,作为一个参数放进去,就可以了,然后FormData,就会得到这个表单对象里面的所有的参数,甚至我们在表单中,都不需要声明enctype ="multipart/form-data" ,就可以直接提交。
使用FormData,第一是在提交表单的时候,不需要写大量的js来获得表单数据,直接把表单对象构造就行了。第二就是可以直接异步上传文件,简单牛逼爆了!
注意:使用FormData提交的时候,大家会注意到表单提交的是request payload,具体有兴趣的同学可以自己百度,它不是之前的Form data提交的,所以后台也是要经过处理的,比如springMVC就需要配置
不然会接收不到数据,当然,后台的话,我们这里就先不管。
ajax c 提交form,使用ajax提交form表单,包括ajax文件上传相关推荐
- ajax post form上传图片,ajax怎样提交form表单与实现文件上传
这次给大家带来ajax怎样提交form表单与实现文件上传,ajax提交form表单与实现文件上传的注意事项有哪些,下面就是实战案例,一起来看一下. 前几天,发现了一些小问题.我在写后台管理页面时,需要 ...
- jquery.form.js的ajaxSubmit和ajaxForm使用(用于多文件上传以及其他参数的混合提交)
jquery.form.js的ajaxSubmit和ajaxForm使用(用于多文件上传以及其他参数的混合提交) ajaxSubmit 和ajaxForm区别 ajaxForm ajaxForm()不 ...
- ajax异步文件上传和进度条
一.ajax异步文件上传 之前有说过在form表单内的文件上传,但是会刷新页面,下面就来实现不刷新页面的异步文件上传 <div class="uploding_div"> ...
- ajax 表单提交传文件,Ajax提交Form表单及文件上传
刚刚申请下来的博客,写得第一篇.有点小激动,本人以前是一名工业3D设计师突然有些变故做上了JavaWeb开发: 前几天,发现了一些小问题.我在写后台管理页面时,需要上传一张图片.于是我就用很普通的Fo ...
- Ajax(form表单文件上传、请求头之contentType、Ajax传递json数据、Ajax文件上传)
form表单文件上传 上菜 file_put.html <form action="" method="post" enctype="multi ...
- 转: 如何实现jQuery的Ajax文件上传
[PHP文件上传] 在开始之前,我觉得是有必要把通WEB上传文件的原理简单说一下的. 实际上,在这里不管是PHP,JSP,还是ASP处理上传的文件,其实都是WEB早已把文件上传到服务器了,我们只是运用 ...
- PHP_APC+Ajax实现的监视进度条的文件上传
//load.js: ADS.addEvent(window, 'load', function(event) {var fileList = ADS.$('fileList');//按照需要修改uo ...
- mui ajax 文件上传,MUI的图片上传和压缩
MUI的上传图片目前知道有两种方式,一种见前面文章中关于图片裁切时使用的base64作为字符串上传,另外一种则是本篇章中所使用的plus.uploader方式,它是一种真正意义上的文件上传,我们可以使 ...
- .form文件_含文件上传的form表单AJAX提交小结
最近在学习PHP时,遇到不知道如何含文件上传的form表单AJAX提交,现在把这些记录下来以备自己后续复习时用: HTML代码 *姓名: *性别: {eq name='list.sex' value= ...
- 使用ajax提交form表单,包括ajax文件上传 转http://www.cnblogs.com/zhuxiaojie/p/4783939.html...
使用ajax提交form表单,包括ajax文件上传 前言 使用ajax请求数据,很多人都会,比如说: $.post(path,{data:data},function(data){... },&quo ...
最新文章
- 全国信息化工程师院校IT双证书职业课程认证
- Python中float(‘inf‘)代表什么意思?
- 使用structure101分析软件包的依赖关系
- Audacity Mac版教程,使用Audacity编辑音频波形图的方法步骤
- 牛客国庆集训派对Day3: I. Metropolis(dijkstra)
- 路径压缩_实战|python GUI压缩小程序
- 用递归方法求一个list的最大值
- c语言非素数因子,C语言作业:判断一个数是不是素数,如果不是,输出它的素数因子。...
- pip下载opencv报错
- android简单记账软件,简洁记账app
- 性能优化系列(四)电量性能优化
- hsf 架构_HSF源码剖析
- 历时一年 Apache Spark 3.3.0 正式发布,新特性详解
- 计算机有关英语单词以及谐音,英语单词中文谐音大全
- 4K分辨率是什么 你真的知道吗?
- 实例学习Ansible系列:配置文件ansible.cfg的设定与使用
- JAVA 租车系统(包含Mysql数据库)
- 练习2-4:重新编写函数squeeze(s1,s2),将字符串s1中的任何字符与字符串时s2中的字符匹配的字符都删除
- 2019年web前端学习路线图大纲及学习方法,哎呦不错哦
- 毕业设计-基于微信小程序的实验室信息管理系统