vue qs.stringify 和JSON.stringify 區別

最近和前端聯調是出現參數結構問題，下面就遇到的問題進行記錄——由於本人非后台開發人員，所以一些前端代碼只做記錄不做詳細解釋

前端技術參考地址已經附加在下文，請尊重原創

后台參數接收格式

@RequestBody List<Long> idList

或者

@RequestBody Long[] idList

前台傳遞格式

let idLists = [];
that.checkBoxData.forEach(function(e) {
  idLists.push(e.consumeId);
});
API.stop(idLists)
  .then(
    function(result) {
      that.loading = false;
      if (result && parseInt(result.code) === 0) {
        that.$message.success({
          showClose: true,
          message: "停用成功",
          duration: 1500
        });
        that.search();
      }
    },
    function(err) {
      that.loading = false;
      that.$message.error({
        showClose: true,
        message: err.toString(),
        duration: 2000
      });
    }
  )

如果后台傳參為

@RequestParam("supplierMaterialids[]") Long[] supplierMaterialids

則前端傳參格式——紅色部分

 stopStatus:function (){
        this.hospitalsupplieridarr=[];
        let that = this;
          if(this.checkBoxData.length<1)
        {
            this.$message.error({
                  showClose: true,
                  message: "請選擇一條數據進行停用",
                  duration: 2000
                });
        }else{
          for(var i=0;i<this.checkBoxData.length;i++)
          {
            this.hospitalsupplieridarr.push(this.checkBoxData[i].supplierrelationshipid)
          }
          let params = qs.stringify( {hospitalSupplierids:this.hospitalsupplieridarr},{ arrayFormat: 'brackets' }); this.$confirm("確認停用供應商嗎?", "提示", {type: "warning"})
          .then(() => {
        API.setHospitalSupplierStopStatus(params).then(res => {
              if (res.code === 0) {
                that.$message.success({
                  showClose: true,
                  message: "停用成功",
                  duration: 2000
                });
                that.search(1);
              } else {
                that.$message.error({
                  showClose: true,
                  message: "停用失敗",
                  duration: 2000
                });
              }
            });
        }).catch(() => {
          });
        }
     },

下面是網上查的資料關於——vue  qs.stringify 和JSON.stringify 區別

參考鏈接——https://www.cnblogs.com/web1/p/8659398.html

qs可通過npm install qs命令進行安裝，是一個npm倉庫所管理的包。

而qs.stringify()將對象 序列化成URL的形式，以&進行拼接。

JSON是正常類型的JSON，請對比一下輸出

var a = {name:'hehe',age:10};
 qs.stringify(a)
// 'name=hehe&age=10'
JSON.stringify(a)
// '{"name":"hehe","age":10}'

 

其中qs 分為三種類型——參考鏈接https://blog.csdn.net/pifutan/article/details/86320705

qs.stringify({ids: [1, 2, 3]}, {arrayFormat: ‘indices‘})
//形式： ids[0]=1&aids1]=2&ids[2]=3

qs.stringify({ids: [1, 2, 3]}, {arrayFormat: ‘brackets‘})
//形式：ids[]=1&ids[]=2&ids[]=3

qs.stringify({ids: [1, 2, 3]}, {arrayFormat: ‘repeat‘})
//形式： ids=1&ids=2&id=3

對比：

 

 

總結：使用List<Long>和Long[]是沒有區別的，區別在於@RequestParam中是否加[]

qs.stringify({ids: [1, 2, 3]}, {arrayFormat: ‘indices‘})

//形式： ids[0]=1&aids[1]=2&ids[2]=3 @RequestParam無法接收
 

qs.stringify({ids: [1, 2, 3]}, {arrayFormat: ‘brackets‘})

//形式：ids[]=1&ids[]=2&ids[]=3 要加[]


qs.stringify({ids: [1, 2, 3]}, {arrayFormat: ‘repeat‘})

//形式： ids=1&ids=2&ids=3 不能加[]