Vue fügt die Axios-Komponente hinzu, um das Problem zu lösen, dass die im Post übergebenen Parameter null sind

Dieses Mal bringe ich Ihnen die Axios-Komponente, die zu Vue hinzugefügt wurde, um das Problem der Nullparameter in der Post zu lösen. Was sind die Vorsichtsmaßnahmen? . Hier sind die tatsächlichen Fälle. Stehen Sie auf und schauen Sie sich das an.

1. axios installieren

npm install axios --save

2. Axios-Komponente hinzufügen

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. Anfrage erhalten

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 Anfrage

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. Operationsergebnis:

6. Hinweis: Bei Verwendung der Post-Methode gibt es zwei Möglichkeiten, Parameter zu übergeben, eine davon ist die normale Methode Eine davon ist die Methode

json

. Wenn der Hintergrund die normale Methode akzeptiert, verwenden Sie die obige Methode.

Gemeinsam gebildete Methode

var params = new URLSearchParams();
params.append('name', 'hello jdmc你好');
params.append('id', '2');
data:params

Hintergrundempfangsparameter:

public Student greeting2(int id,String name) {

JSON-Methode

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

Parameter im Hintergrund empfangen

Ich glaube, dass Sie die Methode beherrschen, nachdem Sie den Fall in diesem Artikel gelesen haben. Weitere spannende Informationen finden Sie unter Bitte achten Sie auf andere verwandte Themen im Artikel zur chinesischen PHP-Website!

public Object greeting2(@RequestBody Object student) {

Empfohlene Lektüre:

Detaillierte Erläuterung der Verwendung von tiefem und flachem Kopieren von JS

Der Unterschied zwischen Methode und berechnet in Vue

Das obige ist der detaillierte Inhalt vonVue fügt die Axios-Komponente hinzu, um das Problem zu lösen, dass die im Post übergebenen Parameter null sind. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!