JQuery基于FormData异步提交数据文件


Posted in jQuery onSeptember 01, 2020

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的对象。

<input type="file" name="f" id="f" multiple>

var fd = new FormData();
    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里面。

var fd = new FormData(document.querySelector("form"));
fd.append("CustomField", "This is some extra data");
$.ajax({
 url: "stash.php",
 type: "POST",
 data: fd,
 processData: false, // 不处理数据
 contentType: false  // 不设置内容类型
});

使用append添加时formdata的key若已存在,则不能重复添加,会忽略本次append操作,这在对于使用经常需要表单取出值是相当不利的,所以建议使用set方法来添加新的key-value值,set的意思是修改一个已经存在的键值对,如果不存在的话就创建一个。即

fd.set("CustomField", "This is some extra data");
$.ajax是主动事件,而我们希望当用户点击按钮才执行,这里可以将$.ajax函数放在一个按钮的click事件里面,也可以使用下面的方法。

$('form').submit(function{
  // 你自己的代码,一般是数据合法性验证
$.ajax({ 
     
   });
   return false;
})

submit函数可以在表单被提交时执行,我们可以用来将其作为执行$.ajax函数的触发事件,然后使用return false来提前阻止这个表单的提交。

注意:有些文章里说FormData的兼容问题,FormData很早就提出来了。并且入股哟你想要使用jquery里面的ajax来传输文件就免不了使用它这是因为下面两个方法也用到了FormData。当然原生的ajax有直接传输文件的方法,感兴趣的人可以看下。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

jQuery 相关文章推荐
jquery中关于bind()方法的使用技巧分享
Mar 30 jQuery
jQuery Json数据格式排版高亮插件json-viewer.js使用方法详解
Jun 12 jQuery
详谈表单格式化插件jquery.serializeJSON
Jun 23 jQuery
jquery一键控制checkbox全选、反选或全不选
Oct 16 jQuery
jquery实现企业定位式导航效果
Jan 01 jQuery
jQuery+vue.js实现的多选下拉列表功能示例
Jan 15 jQuery
jQuery实现表格的增、删、改操作示例
Jan 27 jQuery
如何用webpack4.0撸单页/多页脚手架 (jquery, react, vue, typescript)
Jun 18 jQuery
JS秒杀倒计时功能完整实例【使用jQuery3.1.1】
Sep 03 jQuery
jQuery 选择器用法实例分析【prev + next】
May 22 jQuery
jquery插件懒加载的示例
Oct 24 jQuery
jquery实现点击左右按钮切换图片
Jan 27 jQuery
JQuery使用数组遍历跳出each循环
Sep 01 #jQuery
JS JQuery获取data-*属性值方法解析
Sep 01 #jQuery
jQuery实现动态加载瀑布流
Sep 01 #jQuery
js和jquery判断数据类型的4种方法总结
Aug 28 #jQuery
jQuery编写QQ简易聊天框
Aug 27 #jQuery
jQuery实现简单QQ聊天框
Aug 27 #jQuery
基于jquery实现彩色投票进度条代码解析
Aug 26 #jQuery
You might like
西德产收音机
2021/03/01 无线电
解析thinkphp中的导入文件标签
2013/06/20 PHP
Yii2框架dropDownList下拉菜单用法实例分析
2016/07/18 PHP
thinkphp5.1 框架导入/导出excel文件操作示例
2020/05/25 PHP
js中substr,substring,indexOf,lastIndexOf的用法小结
2013/12/27 Javascript
不使用jquery实现js打字效果示例分享
2014/01/19 Javascript
window.location的重写及判断location是否被重写
2014/09/04 Javascript
JavaScript中获取高度和宽度函数总结
2014/10/08 Javascript
setTimeout内不支持jquery的选择器的解决方案
2015/04/28 Javascript
javascript实现点击按钮弹出一个可关闭层窗口同时网页背景变灰的方法
2015/05/13 Javascript
学习Javascript面向对象编程之封装
2016/02/23 Javascript
浅谈Node.js 子进程与应用场景
2018/01/24 Javascript
vue-router项目实战总结篇
2018/02/11 Javascript
vue2.0实现前端星星评分功能组件实例代码
2018/02/12 Javascript
vue组件传递对象中实现单向绑定的示例
2018/02/28 Javascript
使用sessionStorage解决vuex在页面刷新后数据被清除的问题
2018/04/13 Javascript
angular中子控制器向父控制器传值的实例
2018/10/08 Javascript
scrapyd schedule.json setting 传入多个值问题
2019/08/07 Javascript
vuex存储复杂参数(如对象数组等)刷新数据丢失的解决方法
2019/11/05 Javascript
JavaScript 接口原理与用法实例详解
2020/05/12 Javascript
Vue项目移动端滚动穿透问题的实现
2020/05/19 Javascript
Python求导数的方法
2015/05/09 Python
深入理解NumPy简明教程---数组3(组合)
2016/12/17 Python
python递归删除指定目录及其所有内容的方法
2017/01/13 Python
python 计算文件的md5值实例
2017/01/13 Python
python读写配置文件操作示例
2019/07/03 Python
用CSS3实现Win8风格的方格导航菜单效果
2013/04/10 HTML / CSS
Darphin迪梵官网: 来自巴黎,植物和精油调制的护肤品牌
2016/10/11 全球购物
美体小铺波兰官方网站:The Body Shop波兰
2019/09/03 全球购物
美国隐形眼镜网上商店:Lens.com
2019/09/03 全球购物
Linux文件系统类型
2012/02/15 面试题
法人授权委托书范本
2014/04/04 职场文书
《跟踪台风的卫星》教学反思
2014/04/10 职场文书
党性教育心得体会
2014/09/03 职场文书
公务员个人年终总结
2015/02/12 职场文书
班主任高考寄语
2015/02/26 职场文书