Home Web Front-end JS Tutorial Sending a post request through axios found that springMVC could not receive parameters (detailed tutorial)

Sending a post request through axios found that springMVC could not receive parameters (detailed tutorial)

Jun 01, 2018 am 11:29 AM
axios post ask

Below I will share with you a solution to the problem that springMVC cannot receive parameters when sending a post request in axios. It has a good reference value and I hope it will be helpful to everyone.

When axios sent a post request, there was a situation where the parameters could not be received in the background. After analyzing the request, I found that the content-type of the request header was wrong. It was application/json. Normally it should be application/x-www- form-urlencoded.

There are three solutions:

1. Set the default request header of axios

1

2

3

4

//设置全局的

axios.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded';

var instance = axios.create({}) // 这样创建出来的 只需要:

instance.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded';

Copy after login

2. Use URLSearchParams to construct parameters

1

2

3

4

5

6

7

8

9

var params = new URLSearchParams();

params.append("username", _this.username);

params.append("password", _this.password);

axios.post("/service/login", paramsOfJson

   ).then(function (response) {

    console.log(response);

   }).catch(function (error) {

    console.log(error);

   })

Copy after login

3. Use @requestBody to receive in the background

1

2

@PostMapping(value = "/login")

public String testLogin(@RequestBody Map dataMap)

Copy after login

The above is what I compiled for everyone. I hope it will be helpful to everyone in the future.

Related articles:

vue filter filter instance detailed explanation

The vue page switches to the scroll page to display the top instance_vue.js

Let’s talk about the use of JS animation library Velocity.js

The above is the detailed content of Sending a post request through axios found that springMVC could not receive parameters (detailed tutorial). For more information, please follow other related articles on the PHP Chinese website!

Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Hot AI Tools

Undresser.AI Undress

Undresser.AI Undress

AI-powered app for creating realistic nude photos

AI Clothes Remover

AI Clothes Remover

Online AI tool for removing clothes from photos.

Undress AI Tool

Undress AI Tool

Undress images for free

Clothoff.io

Clothoff.io

AI clothes remover

Video Face Swap

Video Face Swap

Swap faces in any video effortlessly with our completely free AI face swap tool!

Hot Tools

Notepad++7.3.1

Notepad++7.3.1

Easy-to-use and free code editor

SublimeText3 Chinese version

SublimeText3 Chinese version

Chinese version, very easy to use

Zend Studio 13.0.1

Zend Studio 13.0.1

Powerful PHP integrated development environment

Dreamweaver CS6

Dreamweaver CS6

Visual web development tools

SublimeText3 Mac version

SublimeText3 Mac version

God-level code editing software (SublimeText3)

Choice of data request in Vue: Axios or Fetch? Choice of data request in Vue: Axios or Fetch? Jul 17, 2023 pm 06:30 PM

Choice of data request in Vue: AxiosorFetch? In Vue development, handling data requests is a very common task. Choosing which tool to use for data requests is a question that needs to be considered. In Vue, the two most common tools are Axios and Fetch. This article will compare the pros and cons of both tools and give some sample code to help you make your choice. Axios is a Promise-based HTTP client that works in browsers and Node.

Efficiently utilize Vue and Axios to implement batch processing of front-end data Efficiently utilize Vue and Axios to implement batch processing of front-end data Jul 17, 2023 pm 10:43 PM

Efficiently utilize Vue and Axios to implement batch processing of front-end data. In front-end development, data processing is a common task. When we need to process a large amount of data, processing the data will become very cumbersome and inefficient if there is no effective method. Vue is an excellent front-end framework, and Axios is a popular network request library. They can work together to implement batch processing of front-end data. This article will introduce in detail how to efficiently use Vue and Axios for batch processing of data, and provide relevant code examples.

Vue and Axios implement synchronous processing of asynchronous data requests Vue and Axios implement synchronous processing of asynchronous data requests Jul 17, 2023 am 10:13 AM

Vue and Axios implement synchronous processing of asynchronous data requests Introduction: In modern front-end development, because the page needs to obtain data through asynchronous data requests and dynamically display it, asynchronous processing has become an inevitable requirement. However, asynchronous data requests often cause code logic to become complex and difficult to maintain. In the Vue framework, the Axios library can be used to easily implement synchronous processing of asynchronous data requests, thereby improving the readability and maintainability of the code. 1. Introduction to Vue Vue is a lightweight front-end framework.

How to implement PHP to jump to the page and carry POST data How to implement PHP to jump to the page and carry POST data Mar 22, 2024 am 10:42 AM

PHP is a programming language widely used in website development, and page jumps and carrying POST data are common requirements in website development. This article will introduce how to implement PHP page jump and carry POST data, including specific code examples. In PHP, page jumps are generally implemented through the header function. If you need to carry POST data during the jump process, you can do it through the following steps: First, create a page containing a form, where the user fills in the information and clicks the submit button. Acti in the form

What should I do if 'Uncaught (in promise) Error: Network Error' occurs when using axios in a Vue application? What should I do if 'Uncaught (in promise) Error: Network Error' occurs when using axios in a Vue application? Jun 25, 2023 am 09:11 AM

Vue is a popular JavaScript framework that helps developers build dynamic single-page applications. Axios is a Promise-based HTTP client written for JavaScript, used by browsers and Node.js platforms to send HTTP requests. Vue and Axios are a good combination, but in actual application, you may encounter "Uncaught(inpromise)Error:NetworkErr"

Vue and Axios implement error handling and prompt mechanism for data requests Vue and Axios implement error handling and prompt mechanism for data requests Jul 17, 2023 am 09:04 AM

Vue and Axios implement error handling and prompt mechanism for data requests Introduction: In Vue development, Axios is often used for data requests. However, in the actual development process, we often encounter request errors or the server returns error codes. In order to improve the user experience and detect and handle request errors in a timely manner, we need to use some mechanisms for error handling and prompts. This article will introduce how to use Vue and Axios to implement error handling and prompt mechanisms for data requests, and provide code examples. Install Axi

PHP code example: How to use POST to pass parameters and implement page jumps PHP code example: How to use POST to pass parameters and implement page jumps Mar 07, 2024 pm 01:45 PM

Title: PHP code example: How to use POST to pass parameters and implement page jumps In web development, it often involves the need to pass parameters through POST and process them on the server side to implement page jumps. PHP, as a popular server-side scripting language, provides a wealth of functions and syntax to achieve this purpose. The following will introduce how to use PHP to implement this function through a practical example. First, we need to prepare two pages, one to receive POST requests and process parameters

How Nginx implements request rewrite configuration based on request URL How Nginx implements request rewrite configuration based on request URL Nov 08, 2023 pm 04:15 PM

Nginx is a lightweight, high-performance web server that not only supports advanced functions such as reverse proxy and load balancing, but also has powerful request rewriting capabilities. In actual web applications, in many cases the request URL needs to be rewritten to achieve better user experience and search engine optimization effects. This article will introduce how Nginx implements request rewriting configuration based on the request URL, including specific code examples. Rewrite syntax In Nginx, you can use the rewrite directive to perform request rewriting. its basic language

See all articles