当前位置: 萬仟网 > IT编程>开发语言>Jquery > JQuery基于FormData异步提交数据文件

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

2020年09月02日  | 萬仟网IT编程  | 我要评论
web中数据提交事件是常常发生的,但是大多数情况下我们不希望使用html中的form表单提交,因为form表单提交会中断当前浏览器的操作并且会调到另一个地址(即使这个地址是当前页面),并且会重复加载一

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有直接传输文件的方法,感兴趣的人可以看下。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持萬仟网。

如您对本文有疑问或者有任何想说的,请点击进行留言回复,万千网友为您解惑!

相关文章:

  • jQuery03

    jQuery03

    使用jQuery实现表单校验:(单独拿出来介绍表单校验,是因为内容比较多,知识点较多); 1、注:这里使用validation插件完成对表单数据的校... [阅读全文]
  • JQuery动画效果

    JQuery动画实现的注意点: 1、JQuery 定义了 fadeIn() 和 fadeOut() 等简单方法来实现常见的视觉效果,还定义了一个 a... [阅读全文]
  • JS变量、作用域、内存

    JS变量、作用域、内存

    写到这个题目《JS变量、作用域,内存》,我就不由自主想起了黄金三嫖客。可能是名字有点像,嗯,一定是这样子的! JS接触下来,应该是要比Java简单不... [阅读全文]
  • 兼容多浏览器的回车键绑定事件

    最近做任务的时候,遇到一个问题,就是要求input绑定回车键,当有内容且按下回车键时,执行搜索功能,但是浏览器不一样,执行的效果也不一样,但是最终还... [阅读全文]
  • jQuery学习和知识点总结归纳

    jQuery目前在Web前端开发所占的比重越来越高,在我们jQuery学习和开发的过程中都会去使用。jQuery帮我们解决了浏览器之间JS一些不兼容... [阅读全文]
  • JQ中的选择器children()和find()区别

    1:children及find方法都用是用来获得element的子elements的,两者都不会返回 text node,就像大多数的jQuery方... [阅读全文]
  • layui常用的验证

    var LayVerifyExtend = { notnullNonnegativeInteger: function (value, item) ... [阅读全文]
  • jquery获取url的方式

    (function ($) { $.getUrlParam = function (name) { var reg = new RegExp(&qu... [阅读全文]
  • 页面table弹框

    <a id="s" href="##" onclick='doSomething("... [阅读全文]
  • 实现点击到底部、顶部、指定div功能

    顶部: $(".back_top").click(function () { scrollTo(0, 0); }); funct... [阅读全文]
验证码:
Copyright © 2017-2021  萬仟网 保留所有权利. 粤ICP备17035492号-1
站长QQ:2386932994 | 联系邮箱:2386932994@qq.com