vue가 배열 요청을 제출합니다.

프런트엔드 개발의 급속한 발전과 함께 점점 더 많은 프로젝트가 프론트엔드와 백엔드 분리 개발 방식을 채택하고 있습니다. 이 모드에서 프런트 엔드는 뷰 렌더링, 상호 작용 논리 및 기타 처리를 담당하고 백 엔드는 데이터 제공을 담당합니다. 프런트엔드와 백엔드 간의 데이터 상호작용은 일반적으로 인터페이스 호출의 형태를 취합니다.

실제 개발에서는 배열형 데이터를 제출해야 하는 경우가 많습니다. 예를 들어, 사용자가 정산을 위해 여러 상품을 선택하면 일련의 상품 목록이 형성되며, 이 배열은 처리를 위해 백엔드에 제출되어야 합니다. Vue에서 배열 유형 요청을 제출하는 방법은 무엇입니까? 아래에서는 두 가지 방법을 소개하겠습니다.

방법 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 => {
  // 请求失败处理逻辑
})

위 코드에서는 항목 목록 배열의 각 항목 ID를 for 루프를 통해 FormData 개체에 추가한 다음 전체 개체를 요청 본문으로 백엔드에 보냅니다. 요청을 받은 후 백엔드는 FormData 객체를 직접 구문 분석하여 배열 유형 데이터를 얻습니다.

요약

이 글에서는 Vue에서 배열 유형 요청을 제출하는 두 가지 방법, 즉 배열을 문자열로 연결하고 FormData를 사용하여 데이터를 제출하는 방법을 소개합니다. 두 방법 모두 실제 개발에 적용할 수 있는 시나리오가 있습니다. 어떤 방법을 사용할지는 특정 요구 사항에 따라 선택해야 합니다. 이 기사가 프런트엔드 및 백엔드 데이터 상호 작용을 배우는 Vue 개발자에게 도움이 되기를 바랍니다.

위 내용은 vue가 배열 요청을 제출합니다.의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!