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

4.post request

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 is

json 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!