vue sendet eine Array-Anfrage

Mit der rasanten Entwicklung der Front-End-Entwicklung übernehmen immer mehr Projekte die Front-End- und Back-End-Trennungsentwicklungsmethode. In diesem Modus ist das Front-End für das Rendern von Ansichten, die Interaktionslogik und andere Verarbeitungen verantwortlich, während das Back-End für die Bereitstellung von Daten verantwortlich ist. Die Dateninteraktion zwischen Front- und Back-End erfolgt normalerweise in Form von Schnittstellenaufrufen.

In der tatsächlichen Entwicklung müssen wir häufig Daten vom Array-Typ übermitteln. Wenn der Benutzer beispielsweise mehrere Produkte zur Abrechnung auswählt, wird eine Reihe von Produktlisten erstellt, die zur Verarbeitung an das Backend übermittelt werden müssen. Wie übermittle ich in Vue eine Array-Typ-Anfrage? Im Folgenden stellen wir zwei Methoden vor.

Methode 1: Das Array in eine Zeichenfolge zusammenfügen

Wir können das Array gemäß einem bestimmten Format in eine Zeichenfolge zusammenfügen und diese Zeichenfolge dann als Anforderungsparameter an das Backend senden. Nachdem das Backend die Anfrage erhalten hat, analysiert es die Zeichenfolge zur Verarbeitung in ein Array.

Codebeispiel:

// 假设有这样一个商品列表数组
let goodsList = [
  {id: 1, name: '商品1', price: 100},
  {id: 2, name: '商品2', price: 200},
  {id: 3, name: '商品3', price: 300}
]

// 将数组拼接为字符串
let str = ''
for (let i in goodsList) {
  str += goodsList[i].id + ','
}
// 去掉最后一个逗号
str = str.slice(0, str.length - 1)

// 发送请求，携带字符串参数
axios.get('/api/order', {
  params: {
    goodsIds: str
  }
})
.then(response => {
  // 请求成功处理逻辑
})
.catch(error => {
  // 请求失败处理逻辑
})

Im obigen Code verwenden wir eine for-Schleife, um die ID jedes Elements im Elementlisten-Array in eine Zeichenfolge zusammenzufügen und sie schließlich als Parameter an das Backend zu senden. Das Backend analysiert diese Zeichenfolge dann für den nächsten Verarbeitungsschritt in ein Array.

Allerdings gibt es bei dieser Methode bestimmte Probleme, wie z. B. Einschränkungen hinsichtlich der Länge der Anforderungsparameter. Wir müssen also einen eleganteren Weg wählen: Senden Sie das Array direkt an das Backend.

Methode 2: Verwenden Sie formData, um Daten zu übermitteln

Wir können das FormData-Objekt verwenden, um Array-Typ-Anfragen zu übermitteln. FormData ist ein von HTML5 bereitgestelltes integriertes Objekt, das die Daten im Formular zu einem Datensatz in Schlüsselwertform zusammenfügen kann. Wir können zunächst ein leeres FormData-Objekt erstellen, dann jedes Element im Array zu diesem Objekt hinzufügen und schließlich das gesamte FormData-Objekt als Anforderungstext an das Backend senden.

Codebeispiel:

// 假设有这样一个商品列表数组
let goodsList = [
  {id: 1, name: '商品1', price: 100},
  {id: 2, name: '商品2', price: 200},
  {id: 3, name: '商品3', price: 300}
]

// 创建一个 FormData 对象
let formData = new FormData()

// 将每个商品添加到 FormData 对象中
for (let i in goodsList) {
  formData.append('goodsIds', goodsList[i].id)
}

// 发送请求，携带 FormData 对象
axios.post('/api/order', formData)
.then(response => {
  // 请求成功处理逻辑
})
.catch(error => {
  // 请求失败处理逻辑
})

Im obigen Code fügen wir die ID jedes Elements im Elementlistenarray über eine for-Schleife zum FormData-Objekt hinzu und senden dann das gesamte Objekt als Anforderungstext an das Backend. Nach Erhalt der Anforderung analysiert das Backend das FormData-Objekt direkt, um Daten vom Array-Typ zu erhalten.

Zusammenfassung

In diesem Artikel werden zwei Methoden zum Senden von Array-Typ-Anfragen in Vue vorgestellt, bei denen es sich um die Verkettung von Arrays zu Zeichenfolgen und die Verwendung von FormData zum Senden von Daten handelt. Beide Methoden haben ihre anwendbaren Szenarien in der tatsächlichen Entwicklung. Welche Methode verwendet werden soll, muss entsprechend den spezifischen Anforderungen ausgewählt werden. Ich hoffe, dieser Artikel kann Vue-Entwicklern beim Erlernen der Front-End- und Back-End-Dateninteraktion hilfreich sein.

Das obige ist der detaillierte Inhalt vonvue sendet eine Array-Anfrage. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!