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中map函数的两种方式
Apr 07 jQuery
jQuery Ajax使用FormData上传文件和其他数据后端web.py获取
Jun 11 jQuery
jQuery序列化后的表单值转换成Json
Jun 16 jQuery
使用jQuery实现动态添加小广告
Jul 11 jQuery
jquery.uploadView 实现图片预览上传功能
Aug 10 jQuery
jquery 一键复制到剪切板的实例
Sep 20 jQuery
JS文件中加载jquery.js的实例代码
May 05 jQuery
jQuery实现获取form表单内容及绑定数据到form表单操作分析
Jul 03 jQuery
jQuery实现的3D版图片轮播示例【滑动轮播】
Jan 18 jQuery
jquery操作select常见方法大全【7种情况】
May 28 jQuery
jQuery实现获取多选框的值示例
Feb 07 jQuery
jQuery ajax - getScript() 方法和getJSON方法
May 14 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自动适应范围的分页代码
2008/08/05 PHP
PHP 截取字符串 分别适合GB2312和UTF8编码情况
2009/02/12 PHP
PHP 抓取网页图片并且另存为的实现代码
2010/03/24 PHP
PHP的autoload机制的实现解析
2012/09/15 PHP
PHP访问Google Search API的方法
2015/03/05 PHP
PHP输入流php://input实例讲解
2015/12/22 PHP
PHP全局变量与超级全局变量区别分析
2016/04/01 PHP
详细分析PHP 命名空间(namespace)
2020/06/30 PHP
js对象关系图 方便dom操作
2012/03/18 Javascript
JavaScript中instanceof运算符的用法总结
2013/11/19 Javascript
引入JS文件IE6报语法错误或缺少对象问题的解决方法
2014/01/09 Javascript
js动态创建标签示例代码
2014/06/09 Javascript
JQuery遍历json数组的3种方法
2014/11/08 Javascript
JavaScript中的console.trace()函数介绍
2014/12/29 Javascript
使用angular写一个hello world
2015/01/23 Javascript
JavaScript实现简单Tip提示框效果
2016/04/20 Javascript
Node 搭建一个静态资源服务器的实现
2019/05/20 Javascript
vue实现条件叠加搜索的解决方法
2019/05/28 Javascript
jQuery创建折叠式菜单
2019/06/15 jQuery
JavaScript ECMA-262-3 深入解析(一):执行上下文实例分析
2020/04/25 Javascript
关于better-scroll插件的无法滑动bug(2021通过插件解决)
2021/03/01 Javascript
python中zip()方法应用实例分析
2016/04/16 Python
Python随机生成均匀分布在三角形内或者任意多边形内的点
2017/12/14 Python
将python图片转为二进制文本的实例
2019/01/24 Python
pytorch 获取层权重,对特定层注入hook, 提取中间层输出的方法
2019/08/17 Python
Python新手如何进行闭包时绑定变量操作
2020/05/29 Python
浅析python函数式编程
2020/09/26 Python
使用AJAX和Django获取数据的方法实例
2020/10/25 Python
瑞士领先的网上超市:LeShop.ch
2018/11/14 全球购物
世界上最大的字体市场:MyFonts
2020/01/10 全球购物
暑期实践思想汇报
2014/01/06 职场文书
聘用合同范本
2015/09/21 职场文书
2016银行招聘自荐信
2016/01/28 职场文书
MySQL数据库压缩版本安装与配置详细教程
2021/05/21 MySQL
一些让Python代码简洁的实用技巧总结
2021/08/23 Python
win11自动弹出虚拟键盘怎么关闭? Win11关闭虚拟键盘的技巧
2023/01/09 数码科技