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

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

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。

赞 (0)

相关推荐

  • jQuery+formdata实现上传进度特效遇到的问题

    总结我做HTML5文件上传插件遇到的技术问题 先贴上源码:fileupload-html5.js(PS:公司使用seajs框架) 问题列表 1. JQUERY.AJAX没有监听上传进度的ONPROGRESS事件. 2. XMLHTTPREQUEST(XHR)跨域 问题解答 1. JQUERY没有给出ONPROGRESS事件的接口,必须从其他接口中找到原生XHR对象. jQuery.ajax()返回的是jqXHR对象.jqXHR模仿XHR(原生),但没有模仿实现XHR的所有方法和属性(如:.upl

  • jquery使用FormData实现异步上传文件

    考虑一个常见的用户上传头像的场景: 点击按钮,弹出文件选择框 选中图片并确认后直接上传图片 实现这个功能,需要使用<input>来添加文件,并实现上传功能.传统的上传文件是将<input>放到<form>中提交,但在这个场景中并不存在form表单,只有一个input而已.那么应该如何处理呢? 答案是可以使用FormData来实现文件的提交. 先看一下MDN对FormData的介绍: XMLHttpRequest Level 2添加了一个新的接口FormData.利用Fo

  • jQuery的ajax中使用FormData实现页面无刷新上传功能

    jQuery的ajax中使用FormData实现页面无刷新上传功能

    接着上一篇ajax系列之用jQuery的ajax方法向服务器发出get和post请求写,这篇主要写如何利用ajax和FormData实现页面无刷新的文件上传效果,主要用到了jQuery的ajax()方法和XMLHttpRequest Level 2的FormData接口.关于FormData,大家可以看MDN文档. 1,先看效果图 期望的功能和效果很简单:点击页面中的上传文件表单控件,选择文件后点击"ajax提交",将文件上传至服务器,上传成功后,页面给出一个简单的提示. 2,前端的代

  • jQuery Ajax使用FormData上传文件和其他数据后端web.py获取

    XMLHttpRequest Level 2 添加了一个新的接口--FormData.与普通的 Ajax 相比,使用 FormData 的最大优点就是我们可以异步上传二进制文件. jQuery 2.0+的版本支持FormData 方法一:使用<form>表单初始化FormData对象方式上传文件 •前端(JQuery): <form enctype="multipart/form-data"> <input type="file" na

  • jQuery用FormData实现文件上传的方法

    前言 我们引入jQuery来进行异步上传可以获得更好的用户体验. 一方面,在JavaScript中进行异步操作比表单更加灵活: 另一方面,异步上传也避免了上传大文件时的页面长时间卡死. HTML 一个type=file的<input>就可以让用户来浏览并选择文件, 一般会把输入控件放到一个<form>中,下面的一个简单的表单: <form> <input type="file" id="avatar" name="

  • jQuery利用FormData上传文件实现批量上传

    jQuery利用FormData上传文件实现批量上传

    在项目中涉及题库的批量上传功能,在此利用formdata进行文件上传,后台读取,进行批量插入.同时还需要带入teacherId和courseId两个参数,所以将文件和两个参数append到formdata中,传到后台. JQuery 函数的提交按钮执行的函数如下: <script type="text/javascript"> //批量上传题库 function fileSubmit() { var questionFile = new FormData(); var fi

  • jQuery Ajax使用FormData对象上传文件的方法

    jQuery Ajax使用FormData对象上传文件的方法

    FormData对象,是可以使用一系列的键值对来模拟一个完整的表单,然后使用XMLHttpRequest发送这个"表单". 在 Mozilla Developer 网站 使用FormData对象 有详尽的FormData对象使用说明. 但上传文件部分只有底层的XMLHttpRequest对象发送上传请求,那么怎么通过jQuery的Ajax上传呢? 本文将介绍通过jQuery使用FormData对象上传文件. 使用<form>表单初始化FormData对象方式上传文件 HTM

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

    web中数据提交事件是常常发生的,但是大多数情况下我们不希望使用html中的form表单提交,因为form表单提交会中断当前浏览器的操作并且会调到另一个地址(即使这个地址是当前页面),并且会重复加载一些html浪费带宽,我们希望达到一个无刷新的.异步的提交效果来给用户更好的体验,这时候就要使用ajax,ajax可以不依赖表单自行发起一次http请求并且取回服务器响应的数据,这就是ajax的简便之处.我们这里使用JQuery中封装好的ajax函数,更加简便.下面列举几个使用ajax异步提交数据的方

  • jQuery选取所有复选框被选中的值并用Ajax异步提交数据的实例

    jQuery选取所有复选框被选中的值并用Ajax异步提交数据的实例

    昨天和朋友做一个后台管理系统项目的时候涉及到复选框批量操作,如果用submit表单提交挺方便的,但是要实现用jQuery结合Ajax异步提交数据就有点麻烦了,因为我之前做过的项目中基本上没用Ajax来批量提交复选框数据,今天用到了就分享一下. 由于我做的项目一些地方比较复杂,这里我只举一个小例子,能理解就好. 首先,我做了一个简单的多个复选框的界面,如图: 这是一个比较简单的多个复选框提交界面.代码如下: <body> <div> <input type="chec

  • jQuery基于Ajax方式提交表单功能示例

    本文实例讲述了jQuery基于Ajax方式提交表单功能.分享给大家供大家参考,具体如下: 提交表单一般通过同步的方式提交,提交后页面刷新或跳转到新页面来显示服务器端返回的处理结果.如果表单提交后有另外的操作或业务需求需要还在这个页面上显示或处理,那么页面不能整体刷新,这时第一想到的就是采用ajax的方式提交表单.下面完整的介绍一个表单采用ajax方式提交的流程. 一.准备 1.页面引入jQuery文件 2.页面引入jQuery的表单插件jQuery.form.js 二.实施 1.页面中的表单 <

  • Ajax异步提交数据返回值的换行问题实例分析

    本文实例分析了Ajax异步提交数据返回值的换行问题.分享给大家供大家参考,具体如下: 前面分析介绍了<Javascript基于AJAX回调函数传递参数>及<IE浏览器与FF浏览器关于Ajax传递参数值为中文时的区别>,学习了ajax回调函数传参与针对不同浏览器处理中文乱码问题的方法.这里就来分析一下ajax异步提交返回值中换行问题的处理技巧. 背景介绍: 需要实现的功能是:在下拉框中选择分类,提交到PHP根据选择的分类返回该分类下的成员名称,返回值各成员姓名以换行的形式显示到tex

  • jquery.form.js异步提交表单详解

    本文实例为大家分享了jquery.form.js异步提交表单的具体代码,供大家参考,具体内容如下 引入脚本: <script type="text/javascript" src="/js/jquery.form.min.js"></script> <script src="/js/json2.js"></script> //前端代码: <form id="f1">

  • jQuery基于ajax操作json数据简单示例

    本文实例讲述了jQuery基于ajax操作json数据的方法.分享给大家供大家参考,具体如下: jQuery Ajax 实例演示 jQuery Ajax 的三种格式,在与后台进行数据交互的时候可以是json格式也可以是xml格式,本人建议将数据转化成json格式. Xml与json的比较 1.可读性 JSON和XML的可读性可谓不相上下,一边是建议的语法,一边是规范的标签形式,很难分出胜负. 2.可扩展性 XML天生有很好的扩展性,JSON当然也有,没有什么是XML能扩展,JSON不能的. 3.

  • jQuery使用post方法提交数据实例

    本文实例讲述了jQuery使用post方法提交数据的用法.分享给大家供大家参考.具体实现方法如下: <!DOCTYPE html> <html> <head> <script src="js/jquery.min.js"> </script> <script> $(document).ready(function(){ $("button").click(function(){ $.post(&

  • laravel 解决ajax异步提交数据,并还回填充表格的问题

    小白一个,经过一晚百度,暂时想出来的方法 我就直接图片了 不喜勿喷, 首先我用bootstraptable 简单创建一个表格 ajax 用post提交数据 创建路由和控制器 路由: 路由里面我加前缀和中间件,也可以不加,这laravel的基础,我就不说了(本人很懒) 控制器: 附图:提交的数据表单 每点击一下按钮,就添加一行 以上这篇laravel 解决ajax异步提交数据,并还回填充表格的问题就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持我们.

  • jquery+ajax实现异步上传文件显示进度条

    前言: 今天项目中加了一个上传文件加进度条的需求,我就搞了一下.时间宝贵不多说,直接进入正题. 异步上传文件是要用到ajax里的一个小的知识点:xhr(XML Http Request)一个对象,xhr对象也是ajax一个核心. 关于使用它也很简单:就四步(下面这样写也可以向后端进行发送请求) var xhr=new XMLHttpRequest()//创建xhr对象 xhr.open('请求方式','请求的地址') xhr.send()//发佛那个请求 xhr.onreadystatechan

  • jQuery插件ajaxFileUpload异步上传文件

    ajaxFileUpload.js 很多同名的,因为做出来一个很容易. 我用的是这个:https://github.com/carlcarl/AjaxFileUpload 下载地址在这里:http://xiazai.jb51.net/201610/yuanma/ajaxfileupload(jb51.net).rar AjaxFileUpload.js并不是一个很出名的插件,只是别人写好的放出来供大家用,原理都是创建隐藏的表单和iframe然后用JS去提交,获得返回值. 当初做了个异步上传的功能

随机推荐