博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
Ajax提交数据
阅读量:6226 次
发布时间:2019-06-21

本文共 1616 字,大约阅读时间需要 5 分钟。

背景

  1. 在业务上面使用到了ajax上传图片,采用的方式是提供一个公用的api进行图片上传,然后返回图片的在服务器的url,这样在其他地方使用到时,直接提交图片的url,而不是图片资源,避免影响应能和体验,也方便后期切换(如果后期采用了第三方图片服务,或者对图片需要进行处理,只要改造这个接口就好了)。
  2. 使用Ajax提交表单数据(包含上传文件)有两种形式

    • using only AJAX
    • using the FormData API
  3. 优缺点

    • Using the FormData API is the simplest and fastest, but has the disadvantage that data collected can not be stringified.
    • Using only AJAX is more complex, but typically more flexible and powerful.

FormData简介

The FormData object lets you compile a set of key/value pairs to send using XMLHttpRequest. It is primarily intended for use in sending form data, but can be used independently from forms in order to transmit keyed data. The transmitted data is in the same format that the form's submit() method would use to send the data if the form's encoding type were set to multipart/form-data.

大致意思是你可以将数据使用FormData对象编译成键值对形式,然后使用XMLHttpRequest技术向后端发送数据。主要是用来发送form表单数据,也可以发送带键数据。这种形式传输的数据和一个enctype属性为multipart/form-data并且采用submit()方法提交的form表单传输的数据格式相同。

Ajax使用FormData提交数据

只是简单的示范一下文件上传,表单数据类似,不写例子了。

Ajax上传文件-带form标签的FormData提交

    
测试
特点:form表单提交,带有<form>标签,enctype="multipart/form-data"不设置也可以。

Ajax不带form标签的FormData提交

    
测试
没有<form>标签,基本使用场景中使用的是这种。

Ajax不使用FormData提交数据

从参考2来看,上传文件需要使用使用FileReader对象,并且Ajax不使用FormData提交数据略复杂,幸亏有一些大咖封装了一下,比如官方提供了一个A little vanilla framework(一点香草??????这个使用原生写的,不是封装,,,),再比如ajaxFileUpload(github地址是参考5,官方有示例,试了一下,妥妥的支持IE6..)。

感受

FormData是HTML5新增的属性,可能在兼容浏览器上面会抛弃一些古典(old)浏览器,不过简单;利用纯Ajax提交也还好,因为有很多现成的库,比如jquery,axios...从A little vanilla framework的示例(参考2)来看,基本是根据form表单的encypt形式,采用相应的方式发送数据。

参考

转载地址:http://csxna.baihongyu.com/

你可能感兴趣的文章
2013=字符串
查看>>
webpack学习简单总结
查看>>
页面加载中jquery逐渐消失效果实现
查看>>
stl使用:map和set
查看>>
Sicily 10359:Valuable Jewellery(贪心+优先队列)
查看>>
24、CSS定位
查看>>
JS预解析机制
查看>>
nsq 学习(一)源码安装nsq
查看>>
高效的使用 Response.Redirect
查看>>
利用Linq + Jquery + Ajax 异步分页的实现
查看>>
炫酷MD风之dialog各种对话框
查看>>
谈谈OpenNI 2的安装
查看>>
Ecshop 商品页配送方式添加 实现仿淘宝按地区显示运费
查看>>
SCAU 10685 ACMer不得不知道的事儿(一)-----续
查看>>
List Se 和Map的区别
查看>>
RTS打卡计划第四周
查看>>
C#_delegate - Pair<T> 静态绑定
查看>>
成都OpenPart——DevOps专场活动参与感
查看>>
Delphi xe6 android Popup控件的使用
查看>>
浅谈linux读写同步机制RCU
查看>>