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手风琴的简单制作
May 12 jQuery
jQuery.Form实现Ajax上传文件同时设置headers的方法
Jun 26 jQuery
jQuery实现获取动态添加的标签对象示例
Jun 28 jQuery
jQuery中ajax请求后台返回json数据并渲染HTML的方法
Aug 08 jQuery
jquery判断滚动条距离顶部的距离方法
Sep 05 jQuery
jQuery超简单遮罩层实现方法示例
Sep 06 jQuery
jQuery实现文本显示一段时间后隐藏的方法分析
Jun 20 jQuery
非常实用的jQuery代码段集锦【检测浏览器、滚动、复制、淡入淡出等】
Aug 08 jQuery
Jquery异步上传文件代码实例
Nov 13 jQuery
JQuery常用选择器功能与用法实例分析
Dec 23 jQuery
jQuery实现简易聊天框
Feb 08 jQuery
jQuery实现可以扩展的日历
Dec 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
php开发留言板的CRUD(增,删,改,查)操作
2012/04/19 PHP
PHP多维数组遍历方法(2种实现方法)
2015/12/10 PHP
如何快速的呈现我们的网页的技巧整理
2007/07/01 Javascript
用JS做的简单的可折叠的两级树形菜单
2013/09/21 Javascript
AngularJS教程之MVC体系结构详解
2016/08/16 Javascript
用原生js做单页应用
2017/01/17 Javascript
浅谈微信页面入口文件被缓存解决方案
2018/09/29 Javascript
详解ES6 Fetch API HTTP请求实用指南
2018/11/14 Javascript
移动端手指操控左右滑动的菜单
2019/09/08 Javascript
file-loader打包图片文件时路径错误输出为[object-module]的解决方法
2020/01/03 Javascript
vue跳转方式(打开新页面)及传参操作示例
2020/01/26 Javascript
用Python将IP地址在整型和字符串之间轻松转换
2017/03/22 Python
Python实现针对给定字符串寻找最长非重复子串的方法
2018/04/21 Python
python获取指定字符串中重复模式最高的字符串方法
2018/06/29 Python
Python 给屏幕打印信息加上颜色的实现方法
2019/04/24 Python
PHP统计代码行数的小代码
2019/09/19 Python
使用 PyTorch 实现 MLP 并在 MNIST 数据集上验证方式
2020/01/08 Python
浅谈Python协程
2020/06/17 Python
python进行OpenCV实战之画图(直线、矩形、圆形)
2020/08/27 Python
选购国际女性时装设计师品牌:IFCHIC(支持中文)
2018/04/12 全球购物
CHARLES & KEITH台湾官网:新加坡时尚品牌
2019/07/30 全球购物
线程同步的方法
2016/11/23 面试题
如何现实servlet的单线程模式
2014/08/05 面试题
参观监狱心得体会
2014/01/02 职场文书
《蜗牛的奖杯》教后反思
2014/04/24 职场文书
公司承诺书范文
2014/05/19 职场文书
行政专员岗位职责说明书
2014/09/01 职场文书
考试作弊检讨书1000字(5篇)
2014/10/19 职场文书
瘦西湖导游词
2015/02/03 职场文书
2016元旦晚会主持词
2015/07/01 职场文书
网络营销实训总结
2015/08/03 职场文书
丧事酒宴答谢词
2015/09/30 职场文书
严以律己专题学习研讨会发言材料
2015/11/09 职场文书
在K8s上部署Redis集群的方法步骤
2021/04/27 Redis
java如何实现获取客户端ip地址的示例代码
2022/04/07 Java/Android
MySQL中的全表扫描和索引树扫描
2022/05/15 MySQL