前端 Ajax请求 unable to decode value

前言

开发中，负责的商品这一块，添加和修改商品规格时，如果添加的规格种含有特殊字符，如：%,$，比如：酒，可能有一个度数这个规格，值为：56%。这个时候，ajax请求传入参数，就会报unable to decode value错误。

解决办法

将字符串用encodeURI函数进行编码，再进行ajax请求，就ok了。

贴上代码

function addOrUpdateGoods(flag){
       // 弹窗提示
       wybc.alert({
           text: '确认添加商品吗？',
       }, function ($modal) {
           var url = "";
           if(flag){
               url = "a_goods";
           }else{
               url = "u_goods";
           }
           var $formData = $("#goodsInfoForm").serialize();
           // console.log(encodeURI(submitSpecBtn()))
           //encodeURI() 函数可把字符串作为 URI 进行编码。 submitSpecBtn()返回的是一个JSON.stringify(specTableAllData)转的json字符串，specTableAllData是数组[]
           //这里submitSpecBtn()函数返货的字符串中如果有$，%等特殊字符，ajax请求时会报错：“unable to decode value”，所以用encodeURI()进行编码
            $formData = $formData +"&"+"specStrData=" + encodeURI(submitSpecBtn());
           $.ajax({
               url: url,
               method: "post",
               data: $formData,
               success: function(res){
                   $modal.modal('hide');
                   if(res.errorCode){
                       wybc.tips({text: res.msg,lasting: true});
                       return;
                   }
                   setTimeout(function(){
                       tx.aside_ajax('g_source_goods_config');
                   },400);
               },
               error: function () {
                   $modal.modal('hide');
               }
           })
       });
}

// 提交规格表格数据
function submitSpecBtn() {
    //判断添加商品所有规格值名称均不能相同 重要
    var _specValueAll = [];
    $("input[name='specValue']").each(function () {
    var _specValue = $(this).val();
    _specValueAll.push(_specValue);
         });

     var nary = _specValueAll.sort();

     for(var i = 0; i < _specValueAll.length; i++) {
         if (nary[i] == nary[i + 1]) {
             alert("商品规格重复内容：" + nary[i]);
             return false;
         }
     }
     var specTableAllData = []; //表格数组
     $("#specTbody tr").each(function (trindex, tritem) { //遍历每一行
         var specTableObj = {}; // 表格对象、将表格的每一行当成一个对象
         $(tritem).find("input").each(function (tdindex, tditem) {
             console.log("tdindex:" + tdindex);
             switch (tdindex)
             {
                 case 0:
                     specTableObj.goodsSpecIdA = $(tditem).val();
            // 处理规格图
            var _imgSrc = $(tditem).attr("data-img");
            if (_imgSrc == undefined || _imgSrc == "undefined") {
                         specTableObj.specImg = null;
            } else {
                         specTableObj.specImg = $(tditem).attr("data-img");
            }
                     break;
                 case 1:specTableObj.goodsSpecValueA = $(tditem).val();
                     break;
                 case 2:specTableObj.goodsSpecIdB = $(tditem).val();
                     break;
                 case 3:specTableObj.goodsSpecValueB = $(tditem).val();
                     break;
                 case 4:specTableObj.goodsSpecIdC = $(tditem).val();
                     break;
                 case 5:specTableObj.goodsSpecValueC = $(tditem).val();
                     break;
                 case 6:specTableObj.amount = $(tditem).val();
                     break;
             }
         });
         specTableAllData.push(specTableObj);
     });
     return JSON.stringify(specTableAllData);
}