Home > Article > Web Front-end > Vue adds axios component to solve the problem that the parameters passed in post are null
This time I will bring you vue to add axios components, solve the problem of null parameters passed in post, vue adds axios components, solve the problem of null parameters passed in post What are the precautions , the following is a practical case, one Get up and take a look.
1. Install axios
npm install axios --save
2. Add axios component
import axios from 'axios' axios.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded'; axios.defaults.baseURL = 'http://localhost:7878/zkview'; Vue.prototype.$ajax = axios;
3. Get request
testGet: function () { this.$ajax({ method: 'get', url: '/test/greeting', params: { firstName: 'Fred', lastName: 'Flintstone' } }).then(function (response) { console.log(response); }).catch(function (error) { console.log(error); }); },
testPost: function () { var params = new URLSearchParams(); params.append('name', 'hello jdmc你好'); params.append('id', '2'); this.$ajax({ method: 'post', url: '/test/greeting2', data:params // data: {id: '3', name: 'abc'} }).then(function (response) { console.log(response); }).catch(function (error) { console.log(error); }) }
5. Running result:
##6. Note:
There are two ways to pass parameters when using the post method, one is the normal method and the other isjson Method, if the background accepts the normal method, then use the above method.
Ordinary formed method
var params = new URLSearchParams(); params.append('name', 'hello jdmc你好'); params.append('id', '2'); data:params
Backend receiving parameters:
public Student greeting2(int id,String name) {
json method
data: {id: '3', name: 'abc'}
Background receiving parameters
public Object greeting2(@RequestBody Object student) {I believe you have mastered the method after reading the case in this article. For more exciting information, please pay attention to other related articles on the php Chinese website! Recommended reading:
Detailed explanation of the use of deep and shallow copies of JS
The difference between method and computed in Vue
The above is the detailed content of Vue adds axios component to solve the problem that the parameters passed in post are null. For more information, please follow other related articles on the PHP Chinese website!