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 thename
attribute , 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 document3. 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
FormData
is a browser object. Used to manage form data. IE10+ support. It can be understood in this way thatFormData
theserialize()
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)