JQuery基于FormData异步提交数据文件
web中数据提交事件是常常发生的,但是大多数情况下我们不希望使用html中的form表单提交,因为form表单提交会中断当前浏览器的操作并且会调到另一个地址(即使这个地址是当前页面),并且会重复加载一些html浪费带宽,我们希望达到一个无刷新的、异步的提交效果来给用户更好的体验,这时候就要使用ajax,ajax可以不依赖表单自行发起一次http请求并且取回服务器响应的数据,这就是ajax的简便之处。我们这里使用JQuery中封装好的ajax函数,更加简便。下面列举几个使用ajax异步提交数据的方法。
一:jquery.js中的$.ajax方法
此方法依赖jquery.js插件,有很多版本,可以自己下载。
我们需要在此$.ajax方法中指定一些参数,比如请求地址、请求类型、所需要传输的数据、请求成功后需要执行的操作,这里简略说一下。
$.ajax({ url:"你的url地址", type:'post', data:{key:'value'}, success:function(){ alert('成功'); } })
这是$.ajax方法的简单用法。其中参数data是你要传输的数据,这里的data支持Json对象和字符串。data数据如果是一个form表单里面的,自己写一个json很慢,可以使用jquery里面的serizlize()方法。这个方法返回一个字符串(每个form表单提交的时候也是转化为相同格式的字符串)。
$.ajax({ url:"你的url地址", type:'post', data:$('form').serialize(),//"id=asdasd&s=000&name=1233" success:function(){ alert('成功'); } })
那么,文件也是这样提交的吗?
对于文件的提交我们需要对$.ajax进行一些特殊的设置,并且使用FormData的对象。
varfd=newFormData(); fd.append("name","bill"); fd.append("photo",$('#f')[0].files[0]); fd.append("photo2",$('#f')[0].files[1]); $.ajax({ url:'/webform1.aspx', type:'post', processData:false, contentType:false, data:fd, success:function(){ alert("ok") } })
我们创建一个fd对象并向其中添加键值对,这个值可以是一个文件。$('#f')[0]是取出id=f的元素,至于为什么是[0],这是因为jquery对象都有一个默认为0的索引用来取出其Dom元素,$('f')是一个jquery对象,[0]为Dom元素可以用dom的所有属性和方法。然后使用files来取出文件。这里我使用了files[0]和files[1],这是multiple可以上传多个文件我这里上传了两个。
然后服务器就可以接收文件了,和表单一样的接收方法。
当然可以把一个form直接转化为一个FormData对象,这样我们可以避免把所需内容一个个append到FormData里面。
varfd=newFormData(document.querySelector("form")); fd.append("CustomField","Thisissomeextradata"); $.ajax({ url:"stash.php", type:"POST", data:fd, processData:false,//不处理数据 contentType:false//不设置内容类型 });
使用append添加时formdata的key若已存在,则不能重复添加,会忽略本次append操作,这在对于使用经常需要表单取出值是相当不利的,所以建议使用set方法来添加新的key-value值,set的意思是修改一个已经存在的键值对,如果不存在的话就创建一个。即
fd.set("CustomField","Thisissomeextradata");
$.ajax是主动事件,而我们希望当用户点击按钮才执行,这里可以将$.ajax函数放在一个按钮的click事件里面,也可以使用下面的方法。
$('form').submit(function{ //你自己的代码,一般是数据合法性验证 $.ajax({ }); returnfalse; })
submit函数可以在表单被提交时执行,我们可以用来将其作为执行$.ajax函数的触发事件,然后使用returnfalse来提前阻止这个表单的提交。
注意:有些文章里说FormData的兼容问题,FormData很早就提出来了。并且入股哟你想要使用jquery里面的ajax来传输文件就免不了使用它这是因为下面两个方法也用到了FormData。当然原生的ajax有直接传输文件的方法,感兴趣的人可以看下。
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持毛票票。
声明:本文内容来源于网络,版权归原作者所有,内容由互联网用户自发贡献自行上传,本网站不拥有所有权,未作人工编辑处理,也不承担相关法律责任。如果您发现有涉嫌版权的内容,欢迎发送邮件至:czq8825#qq.com(发邮件时,请将#更换为@)进行举报,并提供相关证据,一经查实,本站将立刻删除涉嫌侵权内容。