WEB-js在函数传递对象数组数据时出现的传输不进去了问题

目录

问题的来源：

传输到前端的数据：

解决问题的思路

思路的具体实现

总结

问题的来源：

在做WEB开发的时候遇到的问题
 需要把一个后端传输过来的json数据进行解析，但是这个json数组中又有一个对象是对象数组的形式的，当你把这个对象数组传入js函数中时会出错。

传输到前端的数据：

[{"lat":"30.162964","lng":"120.272827","name":"萧山区仓库","address":"临浦镇","things":"块石:123.0立方米   ","ckthings":"块石:45067立方米    ","CWList":[{"cknum":"0","clnum":"21","CLlat":"30.070388807312316","CLlng":"120.98680132382566"},{"cknum":"0","clnum":"44","CLlat":"29.665853864273636","CLlng":"120.47346601010386"},{"cknum":"0","clnum":"41","CLlat":"30.35209906273789","CLlng":"121.06390570670683"},{"cknum":"0","clnum":"18","CLlat":"30.18406913403903","CLlng":"120.19047972769886"}]},{"lng":"0000"},{"lat":"30.40418","lng":"120.551627","name":"嘉兴管理处仓库","address":"海宁市盐官观潮景区临江路1号","things":"钢管（材）:56.0吨   ","ckthings":"钢管（材）:62.636吨    ","CWList":[{"cknum":"1","clnum":"44","CLlat":"29.665853864273636","CLlng":"120.47346601010386"},{"cknum":"1","clnum":"18","CLlat":"30.18406913403903","CLlng":"120.19047972769886"}]},{"lat":"30.162964","lng":"120.272827","name":"萧山区仓库","address":"临浦镇","things":"安全帽:58.0顶   ","ckthings":"安全帽:100顶    ","CWList":[{"cknum":"2","clnum":"21","CLlat":"30.070388807312316","CLlng":"120.98680132382566"},{"cknum":"2","clnum":"41","CLlat":"30.35209906273789","CLlng":"121.06390570670683"}]}]

数据中标红的就是我们需要处理的数据。

当我们把这个对象数组CWList传输到web网页中的js自定义函数的时候就会出现错误

例如将上面的CWList传入下面的thelocation()函数中，在调用函数的时候就会出现错误

function thelocation(CWList){

    、、、、、、
    、、、、、、

}

 随即出现的问题就是这样子的：

Uncaught SyntaxError: Invalid or unexpected token

分析一包原因是：内含中文字符串或者中文的符号

 那么我就想着把它直接在外层加个双引号是不是可以呢？

于是就把CWList的数据加了一个双引号（var list="'"+CWList[1]+"'";）试了一下，结果不言而喻肯定还是失败的。那么就可是疯狂的百度问题，但都是没啥用。

最后想了一下是不是里面有特殊的符号的原因导致传进去的时候被阻挡了，于是搜了一下转义字符什么的，果然有几个特殊的字符在我的数据中，转化成String类型传入函数的时候也是不行的，然后就顺理成章的处理这几个特殊的字符就可以实现我们的目的了

解决问题的思路

之后找了一下转码的方法找到一种可以解决我遇到的问题的方法（使用URI编码来进行传输）首先将我们需要传输的带有特殊字符串的数据进行URI编码（也就是将String类型的数据就行URI编码，将其转化为URI格式）然后进行传输，最后在传输的函数中将其解码出来就好了。成功解决我们遇到的问题。

思路的具体实现

前面分析了无非就是将CWList中的字符数据进行一个编解码的操作，那么就变的很简单了

在传输前对数据进行编码成URI格式：

var valueStr = JSON.stringify(CWList);  //对象转字符串
valueStr=encodeURIComponent(valueStr);    //使用uri来传递对象数组的值

这里有一步先将json数组转化成一个字符串，再使用我们的URI编码的方法来实现目的主要用到了encodeURIComponent();方法

在传输后对数据进行解码成我们原来的格式：

var Str = decodeURIComponent(CWList);//使用URI编码来传递数组的值

这一步使用了decodeURIComponent();这个方法来对传输过来的数据进行解码

总结

对于对象数组（包含一定的特殊字符的数据）传输的时候如果直接用string类型进行传输将会出现错误，我们需要对其进行特殊的编码格式的处理（我们用到了URI的编码）

No pains No results