If the request parameter supplied when requesting the interface is of type FormData, we can divide the operation into two ways.
The method in FormData()
0, append() append value
1, set() modify value
2, getAll() get all check box values
3, get() get radio box values
1. Ajax encapsulated by jQuery
If the request parameter is formdata, must set two configuration items
processData: false
contentType: false
$.ajax({
url: 'Interface Address',
type: "POST",
data: fd,
success: function(res){
},
processData: false, //do not convert data request data (the object format is automatically converted to string format on request)
contentType: false // do not set request header (FormData comes with request header)
})
2. Native Ajax manipulation
If the request parameter is FormData, then post-style Ajax requests no longer need to set the request header
FormData:
var form = $("form")[0]; //Converting jq objects to DOM objects (must be DOM objects)
var fd = new FormData(form);
Native ajax:
var xhr = new XMLHttpRequest();
xhr.open('POST', '/common/post'). xhr.onload = function () { var xhr.open('POST', '/common/post');
xhr.open('POST', '/common/post'); xhr.onload = function () {
console.log(this.response); // output the result
}
xhr.send(fd); //pass the data from the form to the backend
Read More:
- Difference between contenttype and datatype in Ajax request of jquery
- React native android: How to Upload Formdata
- [Solved] it only responds to error and does not enter success after AJAX is successfully processed
- How to download files by post submission under Ajax
- [Solved] ajax Error: Uncaught SyntaxError: Unexpected end of JSON input
- @requestbody: How to Use or Not Use
- The solution that needs alert to execute after using ajax
- Vue3.0 Use el-dialog visible Error: ‘.sync‘ modifier on ‘v-bind‘ directive is deprecated. Use ‘v-model:pro
- Interface request error 504 gateway time out [How to Solve]
- Trigger http request when tab page is closed in angular2+ project
- The solution of calling$. Ajax successfully but the success method does not respond
- [Solved] Vue3.2 component computed Error: Write operation failed: computed value is readonly
- [Solved] npm link Error: error Error: EPERM: operation not permitted;The operation was rejected by your operating
- [Solved] node.js request Error: Error: unable to verify the first certificate
- [Solved] Font End Image Display Error: net::ERR_CONNECTION_RESET 431 (Request Header Fields Too Large)
- Vue Use scss Error: this.getOptions is not a function [How to Solve]
- [Solved] error ‘xxx‘ is never reassigned. Use ‘const‘ instead prefer-const
- The body of a for-in should be wrapped in an if statement to filter unwanted properties from the pro
- Method of adding operation button for each line of data in DataGrid of easyUI