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实现多张图片上传预览(不经过后端处理)
Apr 29 jQuery
利用jQuery异步上传文件的插件用法详解
Jul 19 jQuery
简述jQuery Easyui一些用法
Aug 01 jQuery
使用vue与jquery实时监听用户输入状态的操作代码
Sep 19 jQuery
jQuery完成表单验证的实例代码(纯代码)
Sep 30 jQuery
基于jQuery的$.getScript方法去加载javaScript文档解析
Nov 08 jQuery
jQuery实现动态添加节点与遍历节点功能示例
Nov 09 jQuery
如何用input标签和jquery实现多图片的上传和回显功能
May 16 jQuery
jQuery动态移除与增加onclick属性的方法详解
Jun 07 jQuery
jQuery实现的分页插件完整示例
May 26 jQuery
jquery轮播图插件使用方法详解
Jul 31 jQuery
html中两种获取标签内的值的方法
Jun 16 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
php设计模式 DAO(数据访问对象模式)
2011/06/26 PHP
php使用escapeshellarg时中文被过滤的解决方法
2016/07/10 PHP
php版交通银行网银支付接口开发入门教程
2016/09/26 PHP
PHP中使用OpenSSL生成证书及加密解密
2017/02/05 PHP
PHP设计模式之原型设计模式原理与用法分析
2018/04/25 PHP
mongodb和php的用法详解
2019/03/25 PHP
jQuery数据显示插件整合实现代码
2011/10/24 Javascript
MooBox 基于Mootools的对话框插件
2012/01/20 Javascript
Ajax同步与异步传输的示例代码
2013/11/21 Javascript
获取当前点击按钮的id用this.id实现
2014/03/17 Javascript
JavaScript中的object转换成number或string规则介绍
2014/12/31 Javascript
nodejs中实现阻塞实例
2015/03/24 NodeJs
易被忽视的js事件问题总结
2016/05/14 Javascript
angularjs 页面自适应高度的方法
2018/01/17 Javascript
vue-cli中的babel配置文件.babelrc实例详解
2018/02/22 Javascript
JavaScript Canvas实现验证码
2020/08/02 Javascript
JavaScript数据结构与算法之基本排序算法定义与效率比较【冒泡、选择、插入排序】
2019/02/21 Javascript
微信小程序实现左滑动删除效果
2020/03/30 Javascript
vue router动态路由设置参数可选问题
2019/08/21 Javascript
微信小程序实现侧边分类栏
2019/10/21 Javascript
[01:24:34]2014 DOTA2华西杯精英邀请赛5 24 DK VS LGD
2014/05/25 DOTA
[02:34]肉山说——泡妞篇
2014/09/16 DOTA
[26:24]完美副总裁、DOTA2负责人蔡玮专访:电竞如人生
2014/09/11 DOTA
python调用cmd复制文件代码分享
2013/12/27 Python
使用beaker让Facebook的Bottle框架支持session功能
2015/04/23 Python
对Python中数组的几种使用方法总结
2018/06/28 Python
使用python验证代理ip是否可用的实现方法
2018/07/25 Python
win10安装python3.6的常见问题
2020/07/01 Python
Selenium及python实现滚动操作多种方法
2020/07/21 Python
Python基于argparse与ConfigParser库进行入参解析与ini parser
2021/02/02 Python
Clarks鞋法国官方网站:英国其乐鞋品牌
2018/02/11 全球购物
缓刑人员的思想汇报
2014/01/11 职场文书
大学四年的个人自我评价
2014/01/14 职场文书
销售员岗位职责范本
2014/02/03 职场文书
2014年国培研修感言
2014/03/09 职场文书
九九重阳节标语
2014/10/07 职场文书