js拼的onclick调用方法需要注意的地方 之二

那如果之前的方法不行,想传递json对象怎么办呢?

使用下面这种方法,

getA = function(){
                var obj = {'projectId':123,'projectName':'aac'};
                var objStr = JSON.stringify(obj);
                console.info(objStr);


                var a = '<a href="javascript:void(0);" onclick="sendTcMail('+objStr+')">test</a>';
                $('#test').html(a);    
            }

这里将json对象通过JSON.stringify(obj)方法转换成了json对象的字符串(其实就是obj外面加了双引号),就可以用在下面的a字符串中进行拼接,这样拼接出来,sendTcMail方法中就传递的是json对象,可是事实不如人意,浏览器渲染出来的并不是我们想要的效果,会发现引号错乱了,这是为什么呢?
原因就是:JSON.stringify(obj)方法转换的json字符串是通过双引号包裹的,虽然js单双引号都可以,但是在拼接a字符串时,最外层用的是单引号拼接的,所以拼接的objStr变量中也需要是用单引号包裹的;但是objStr变量是通过JSON.stringify(obj)方法来的,所以它并不是单引号就会出现拼接字符串引号不一致,导致浏览器解析html出来并不是我们想要的。

措施:将外层用双引号来拼接,修改如下:

getA = function(){
                var obj = {'projectId':123,'projectName':'aac'};
                var objStr = JSON.stringify(obj);
                console.info(objStr);


                var a = "<a href='javascript:void(0);' onclick='sendTcMail("+objStr+")'>test</a>";
                $('#test').html(a);    
            }

这样拼接就没问题了,最终拼接完之后objStr中的双引号会自动去掉的,所有组成的字符串a中,onclick方法sendTcMail中的参数传递的是json对象obj,并不是json字符串objStr。这点要清楚。
只要遇到拼接字符串,中间还有用到变量,那变量一定也要是字符串类型,如果是对象去直接拼接,就会是对象引用,不是我们要的对象内容,一定要注意。

原文地址:https://www.cnblogs.com/cainiao-Shun666/p/6861402.html