vue中axios給后端傳遞參數(shù)出現(xiàn)等于號(hào)和雙引號(hào)的問(wèn)題及解決方法

更新時(shí)間：2022年11月29日 09:53:43 作者：喝杯咖啡壓壓驚

這篇文章主要介紹了vue中axios給后端傳遞參數(shù)出現(xiàn)等于號(hào)和雙引號(hào)要怎么解決,項(xiàng)目場(chǎng)景我是傳遞一個(gè)string字符給后端時(shí)候報(bào)錯(cuò)，隨手把這個(gè)問(wèn)題記錄下來(lái)了，需要的朋友可以參考下解決方案

項(xiàng)目場(chǎng)景：

例如（等于號(hào)）：我是傳遞一個(gè)String字符給后端的時(shí)候出現(xiàn)如圖情況：

1.傳遞的參數(shù)我在前端看著是好好

2.這是我的接口

//刪除客戶(hù)信息
export const deleteCustomer = (data) => {
  return http.request({
    url: "/customer/delete",
    method: "post",
    data: data,
  });
};

如圖

3.然后刪除失敗我通過(guò)后端接受參數(shù)發(fā)現(xiàn)多了個(gè)=與號(hào)

例如（雙引號(hào)情況）

后來(lái)我將接口改成以下代碼  加上了 "Content-Type": "application/json",格式：

//刪除客戶(hù)信息
export const deleteCustomer = (data) => {

  return http.request({

    url: "/customer/delete",

    method: "post",

    data:data,

    headers: {

      "Content-Type": "application/json",

    },

  });

};

結(jié)果：出現(xiàn)了雙引號(hào)的情況如圖：

解決方案：

我使用params將數(shù)據(jù)放到地址后面：localhost8080xxx?khno=的方式才接收到正常的參數(shù)

1.以下的參數(shù)傳遞的方式

2.后端接收數(shù)據(jù)的方式就不需要：@RequestBody 注解了不然和報(bào)400錯(cuò)誤

注意：因?yàn)槲乙呀?jīng)提前給整個(gè)類(lèi)加上@CrossOrigin注解了所以這里就不用了

3.這里是我接口方式如以下代碼：

//刪除客戶(hù)信息
export const deleteCustomer = (data) => {
? return http.request({
? ? url: "/customer/delete",

? ? method: "get",

? ? params: data,

? ? headers: {
? ? ? "Content-Type": "application/json",

? ? },

? });
};

4運(yùn)行結(jié)果：

到此這篇關(guān)于vue中axios給后端傳遞參數(shù)出現(xiàn)等于號(hào)和雙引號(hào)要怎么解決的文章就介紹到這了,更多相關(guān)vue axios傳遞參數(shù)內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章:

相關(guān)文章

vue踩坑記錄:屬性報(bào)undefined錯(cuò)誤問(wèn)題
這篇文章主要介紹了vue踩坑記錄:屬性報(bào)undefined錯(cuò)誤問(wèn)題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教
2022-04-04
vue?select?change事件如何傳遞自定義參數(shù)
這篇文章主要介紹了vue?select?change事件如何傳遞自定義參數(shù)，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教
2022-04-04
mpvue性能優(yōu)化實(shí)戰(zhàn)技巧(小結(jié))
這篇文章主要介紹了mpvue性能優(yōu)化實(shí)戰(zhàn)技巧(小結(jié))，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧
2019-04-04
Vue實(shí)現(xiàn)表格合并與拆分的示例代碼
在Vue應(yīng)用程序中，表格是一個(gè)非常常見(jiàn)的組件，在這篇文章中，我們將介紹如何在Vue中進(jìn)行表格的合并和拆分，感興趣的小伙伴可以了解一下
2023-06-06
Vue中使用Lodop插件實(shí)現(xiàn)打印功能的簡(jiǎn)單方法
這篇文章主要給大家介紹了關(guān)于Vue中使用Lodop插件實(shí)現(xiàn)打印功能的簡(jiǎn)單方法，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家學(xué)習(xí)或者使用Vue具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面來(lái)一起學(xué)習(xí)學(xué)習(xí)吧
2019-12-12
vue2使用element-ui,el-table不顯示,用npm安裝方式
這篇文章主要介紹了vue2使用element-ui,el-table不顯示,用npm安裝方式，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教
2023-07-07
基于Vue組件化的日期聯(lián)動(dòng)選擇器功能的實(shí)現(xiàn)代碼
這篇文章主要介紹了基于Vue組件化的日期聯(lián)動(dòng)選擇器的實(shí)現(xiàn)代碼，非常不錯(cuò)，具有一定的參考借鑒價(jià)值,需要的朋友可以參考下
2018-11-11
vant中l(wèi)ist的使用以及首次加載觸發(fā)兩次解決問(wèn)題
這篇文章主要介紹了vant中l(wèi)ist的使用以及首次加載觸發(fā)兩次解決問(wèn)題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教
2022-10-10
vue2.0 下拉框默認(rèn)標(biāo)題設(shè)置方法
今天小編就為大家分享一篇vue2.0 下拉框默認(rèn)標(biāo)題設(shè)置方法，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧
2018-08-08
uniapp使用v-loading并且不引入element-ui的操作方法
這篇文章主要介紹了uniapp使用v-loading并且不引入element-ui,首先創(chuàng)建loading.js，創(chuàng)建lloading.scss，本文結(jié)合示例代碼給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下
2022-10-10