Vue adds axios component to solve the problem that the parameters passed in post are null-JS Tutorial-php.cn

Vue adds axios component to solve the problem that the parameters passed in post are null

php中世界最好的语言

Release： 2018-03-28 14:02:59

Original

4710 people have browsed it

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

Copy after login

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;

Copy after login

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

Copy after login

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

Copy after login

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

Copy after login

Backend receiving parameters:

public Student greeting2(int id,String name) {

Copy after login

json method

data: {id: '3', name: 'abc'}

Copy after login

Background receiving parameters

public Object greeting2(@RequestBody Object student) {

Copy after login

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!