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实现前端分页功能
Mar 23 jQuery
jQuery插件FusionCharts绘制2D双折线图效果示例【附demo源码】
Apr 14 jQuery
jQuery EasyUI开发技巧总结
Sep 26 jQuery
jQuery访问浏览器本地存储cookie、localStorage和sessionStorage的基本用法
Oct 20 jQuery
jQuery图片加载失败替换默认图片方法汇总
Nov 29 jQuery
jQuery进阶实践之利用最优雅的方式如何写ajax请求
Dec 20 jQuery
jQuery实现表单动态添加与删除数据操作示例
Jul 03 jQuery
jQuery实现的3D版图片轮播示例【滑动轮播】
Jan 18 jQuery
详解jQuery设置内容和属性
Apr 11 jQuery
jQuery表单选择器用法详解
Aug 22 jQuery
jQuery实现鼠标移入显示蒙版效果
Jan 11 jQuery
viewer.js一个强大的基于jQuery的图像查看插件(支持旋转、缩放)
Apr 01 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
请离开include_once和require_once
2013/07/18 PHP
PHP定时更新程序设计思路分享
2014/06/10 PHP
PHP字符串比较函数strcmp()和strcasecmp()使用总结
2014/11/19 PHP
php给图片添加文字水印方法汇总
2015/08/27 PHP
thinkPHP批量删除的实现方法分析
2016/11/09 PHP
在laravel5.2中实现点击用户头像更改头像的方法
2019/10/14 PHP
jquery判断单个复选框是否被选中的代码
2009/09/03 Javascript
jquery下将选择的checkbox的id组成字符串的方法
2010/11/28 Javascript
JQuery的ready函数与JS的onload的区别详解
2013/11/21 Javascript
jQuery1.9.1针对checkbox的调整方法(prop)
2014/05/01 Javascript
JavaScript charCodeAt方法入门实例(用于取得指定位置字符的Unicode编码)
2014/10/17 Javascript
理解javascript回调函数
2014/12/28 Javascript
js实现屏幕自适应局部代码分享
2015/01/30 Javascript
Jquery和angularjs获取check框选中的值的方法汇总
2016/01/17 Javascript
实例详解jQuery表单验证插件validate
2016/01/18 Javascript
jQuery基于json与cookie实现购物车的方法
2016/04/15 Javascript
AngularJS递归指令实现Tree View效果示例
2016/11/07 Javascript
JavaScript常见的五种数组去重的方式
2016/12/15 Javascript
基于jQuery实现照片墙自动播放特效
2017/01/12 Javascript
JavaScript 详解预编译原理
2017/01/22 Javascript
ES6新特性之模块Module用法详解
2017/04/01 Javascript
vue计算属性和监听器实例解析
2018/05/10 Javascript
vue单页缓存方案分析及实现
2018/09/25 Javascript
layer弹出子iframe层父子页面传值的实现方法
2018/11/22 Javascript
微信小程序实现展示评分结果功能
2019/02/15 Javascript
前端深入理解Typescript泛型概念
2020/03/09 Javascript
Python中random模块生成随机数详解
2016/03/10 Python
Python 出现错误TypeError: ‘NoneType’ object is not iterable解决办法
2017/01/12 Python
python僵尸进程产生的原因
2017/07/21 Python
在PyCharm中三步完成PyPy解释器的配置的方法
2018/10/29 Python
Python中Selenium模块的使用详解
2020/10/09 Python
iKRIX意大利网上商店:男女豪华服装和配件
2019/10/09 全球购物
销售人员中英文自荐信
2013/09/22 职场文书
开学典礼策划方案
2014/05/28 职场文书
软件工程毕业生自荐信
2014/07/04 职场文书
2014年安全工作总结范文
2014/11/13 职场文书