0
点赞
收藏
分享

微信扫一扫

【Ajax】- serialize() 和 FormData()的区别

爱动漫建模 2022-04-21 阅读 65

1.jQuery 的 serialize() 函数

axios({
  	url: 'http://www.itcbc.com:3006/api/addbook',
  	method: 'post',
  	// axios支持的参数格式有:
  	// key=value&key=value
  	// {key:value,key:value}
  	// formdata
 	 data: $('#addForm').serialize()    // 获取	的全部数据
}).then(result => { console.log(result) })

serialize() 函数的使用注意点

 <form>
     <!-- 把所有的框框、按钮都放这里面 -->
     <input type="text" /><br />         // 没有name,获取不到
     <input type="password" name="password" /><br />
     <button>提交</button>
 </form>
 ​
 ​
 $('form').serialize(); // password=123

serialize() 函数的其他特点

2.FormData 介绍

FormData基本使用方法

 // 1. 获取 form 标签的 DOM对象
 let form = document.querySelector('form');
 // 2. 实例化 FormData 对象,传入 form
 let fd = new FormData(form);
 // 3. 提交数据
 axios.post('/api/formdata', fd).then(result => {    // formdata接口直接传入fd就行
     console.log(result);
 })
 // 但不是每个后台接口都接收formdata,只传数据不传文件
 // 所以需要用到遍历forEach,添加到一个新建的对象中
 let data = {}
   // value:值
   // key:键
   // 将formdata转换为对象
   fd.forEach(function(value, key) {
     data[key] = value
   })
   console.log(data)
 append('key', 'value'); // 向对象中追加数据
 set('key', 'value');    // 修改对象中的数据
 delete ('key');         // 从对象中删除数据
 get('key')              // 获取指定key的一项数据
 getAll('key')           // 获取指定key的全部数据,返回一个数组
 forEach()               // 遍历对象中的数据
 ……

3.FormData和serialize的区别

4.formdata的两种使用场景

举报

相关推荐

0 条评论