首页{ "countryId": "", "departId": "", "salerDeptId": "", "customerCode": "", "taskId": "TCS000000031", "taskFrm": "", "filedList": [ { "fieldId": "CAN_USE", "controlKind": "10" }, { "fieldId": "SUGGEST", "controlKind": "10" } ] } vue get请求方式如何将这样的数据结构穿给后端

{ "countryId": "", "departId": "", "salerDeptId": "", "customerCode": "", "taskId": "TCS000000031", "taskFrm": "", "filedList": [ { "fieldId": "CAN_USE", "controlKind": "10" }, { "fieldId": "SUGGEST", "controlKind": "10" } ] } vue get请求方式如何将这样的数据结构穿给后端

时间: 2023-07-24 18:14:13 浏览: 182

在 Vue 中，使用 GET 请求方式将这样的数据结构传给后端需要将其作为查询参数添加到的 URL 中。你可以使用 Axios 库发送 GET 请求并将数据结构作为查询参数传递给后端。示例代码： ```javascript // 在 Vue 组件中 data() { return { formData: { countryId: "", departId: "", salerDeptId: "", customerCode: "", taskId: "TCS000000031", taskFrm: "", filedList: [ { fieldId: "CAN_USE", controlKind: "10" }, { fieldId: "SUGGEST", controlKind: "10" } ] } }; }, methods: { sendDataToBackend() { const params = { countryId: this.formData.countryId, departId: this.formData.departId, salerDeptId: this.formData.salerDeptId, customerCode: this.formData.customerCode, taskId: this.formData.taskId, taskFrm: this.formData.taskFrm, filedList: JSON.stringify(this.formData.filedList) }; axios.get('/api/endpoint', { params }) .then(response => { // 处理响应 }) .catch(error => { // 处理错误 }); } } ``` 在上述示例中，我们将表单数据的每个字段都作为查询参数添加到 `params` 对象中。注意，`filedList` 字段需要使用 `JSON.stringify()` 方法将其转换为字符串形式传递给后端。然后，我们将 `params` 对象作为第二个参数传递给 Axios 的 GET 请求中，Axios 会自动将其拼接到请求的 URL 中。请确保根据实际情况修改请求的 URL 和处理响应的代码。另外，后端需要相应的接口来接收和处理传递的查询参数，并将其转换回相应的数据结构。

阅读全文