【Ajax】- The difference between serialize() and FormData()

Both the serialize() function and FormData() can get  the data of the name attribute in the form at one time

1. jQuery's serialize() function

The serialize() function of jQuery can get the data of the name attribute in the form at one time. Its syntax is as follows: $('form element selector').serialize();

Note: You need to apply the jQuery.js file before using the method

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) })

Notes on using the serialize() function

When using the serialize() function to quickly get form data, you must add a name attribute to each form field! For example, in the following example, the value of the password can only be obtained through the serialize() function:

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

Additional features of the serialize() function

1. This method is encapsulated by jQuery, and jQuery must be introduced when using it

2. Use serialize(), each form field must have the nameattribute , because the value of the name attribute does not have the key of the parameter, it is impossible to generate a key-value pair, and the name attribute name must be set according to the background interface document

3. The result obtained by using this method is a query string structure: name=value&name=value

4. This method can get the value of the hidden field

5. This method cannot get the value of the disabled state

6. This method cannot get the file information in the file field, so the file upload cannot be completed.

2. Introduction to FormData

FormDatais a browser object. Used to manage form data. IE10+ support. It can be understood in this way that FormDatathe serialize()function used to quickly collect form data and can directly submit the created FormData object to the interface. Typical application scenario: FormData + Ajax technology realizes the function of file upload.

Basic usage of FormData

Suppose you need to collect the value requirements of all form items in <form>...</form>, each form element has a name attribute

Precautions:

Submit FormData object, cannot use GET method , the specific interface document shall prevail

formdata is a binary data, which cannot be directly printed out in the console . The created FormData object can be directly submitted to the interface.

Only the interface involving file upload will be processed in the form of formdata in the background.

 // 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)

Before submitting the data, you can use the following API methods to view and modify the data

 append('key', 'value'); // 向对象中追加数据
 set('key', 'value');    // 修改对象中的数据
 delete ('key');         // 从对象中删除数据
 get('key')              // 获取指定key的一项数据
 getAll('key')           // 获取指定key的全部数据，返回一个数组
 forEach()               // 遍历对象中的数据
 ……

3. The difference between FormData and serialize

Common point: All need to set the name attribute of each form item. Can quickly collect form data Can get the value of the hidden field (<input type="hidden" />) Can not get the value of the disabled state (disabled)

Differences: FormData belongs to native code; serialize is a method encapsulated by jQuery. FormData can collect the value of the file field (<input type="file"/>), while serialize cannot. FormData must be used if there is a file upload. The data types of the obtained results are different (just know)

4. Two usage scenarios of formdata

1. Collect form--all--data: pass the form object: let formdata = new FormData(form)

2. Just collect file data --- separate append file data: formdata.append('key of file parameter', file object)