Add the axios component based on vue to solve the problem that the post parameter is null. vueaxios

Source: Internet
Author: User

Add the axios component based on vue to solve the problem that the post parameter is null. vueaxios

Good. goods will be delivered below.

1. Install axios

npm install axios --save

2. Add the 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 methods to pass parameters when using the post method. One is the common method and the other is the json method. If the background accepts the common method, use the preceding method.

Common formed Mode

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

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

Backend receiving Parameters

public Object greeting2(@RequestBody Object student) {

The above article adds the axios component based on vue to solve the problem that the post parameter is null. It is all the content that I have shared with you. I hope you can provide a reference and support for the customer's house.

Related Article

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.