vue が配列リクエストを送信します

フロントエンド開発の急速な発展に伴い、フロントエンドとバックエンドの分離開発手法を採用するプロジェクトが増えています。このモードでは、フロントエンドがビューのレンダリング、対話ロジック、その他の処理を担当し、バックエンドがデータの提供を担当します。フロントエンドとバックエンド間のデータ対話は通常、インターフェイス呼び出しの形式をとります。

実際の開発では、配列型のデータを送信する必要があることがよくあります。たとえば、ユーザーが決済のために複数の製品を選択した場合、製品リストの配列が形成され、この配列を処理のためにバックエンドに送信する必要があります。 Vue で配列型リクエストを送信するにはどうすればよいですか?以下に2つの方法を紹介します。

方法 1: 配列を文字列に結合する

特定の形式に従って配列を文字列に結合し、この文字列をリクエスト パラメーターとしてバックエンドに送信できます。バックエンドはリクエストを受信すると、処理のために文字列を配列に解析します。

コード例:

// 假设有这样一个商品列表数组
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 => {
  // 请求失败处理逻辑
})

上記のコードでは、for ループを使用して製品リスト配列内の各製品の ID を文字列に結合し、最後にそれをパラメーターとして送信します。終わり。次に、バックエンドは、次の処理ステップのためにこの文字列を配列に解析します。

ただし、この方法にはリクエストパラメータの長さの制限など、いくつかの問題があります。したがって、配列をバックエンドに直接送信するという、より洗練された方法を使用する必要があります。

方法 2: formData を使用してデータを送信する

FormData オブジェクトを使用して、配列型の要求を送信できます。 FormData は HTML5 によって提供される組み込みオブジェクトで、フォーム内のデータをキーと値の形式のデータ セットに組み立てることができます。まず空の FormData オブジェクトを作成し、次に配列内の各要素をこのオブジェクトに追加し、最後に FormData オブジェクト全体をリクエスト本文としてバックエンドに送信します。

コード例:

// 假设有这样一个商品列表数组
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 => {
  // 请求失败处理逻辑
})

上記のコードでは、for ループを通じて項目リスト配列内の各項目の ID を FormData オブジェクトに追加し、オブジェクト全体をrequest 本文がバックエンドに送信されます。リクエストを受信した後、バックエンドは FormData オブジェクトを直接解析して配列型のデータを取得します。

概要

この記事では、Vue で配列型のリクエストを送信する 2 つの方法、つまり配列を文字列に連結する方法と、FormData を使用してデータを送信する方法を紹介します。どちらの方法にも実際の開発に適用できるシナリオがあり、ニーズに応じてどちらの方法を使用するかを選択する必要があります。この記事が、フロントエンドとバックエンドのデータ相互作用を学ぶ Vue 開発者に役立つことを願っています。

以上がvue が配列リクエストを送信しますの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。