js中onclick传json数据所遇到的问题

写前端时发现当我用onclick传json数据后,发现函数接收数据为[object object],无法取到值。

js中onclick传json数据所遇到的问题

js中onclick传json数据所遇到的问题

页面打印查看,json未传时能正确取值,传值后json为空值。

然后就查找资料详细了解下 [object Object] 是怎么出来的。

js 中 toString 方法的作用是返回一个反映这个对象的字符串,可参考下表:

js中onclick传json数据所遇到的问题

所以为什么传值后是 [object Object] 字符串,而不是json对象。

第一次修改

我尝试调用 JSON.stringify 方法先将json转为json字符串进行传值

js中onclick传json数据所遇到的问题

js中onclick传json数据所遇到的问题

结果页面竟然报Uncaught SyntaxError: Invalid or unexpected token  或 Uncaught SyntaxError: Invalid or unexpected end of input。错误翻译:无效或意外的标记

后来我发现这个错误是由于json字符串,它的双引号与onclick控件的双引号起冲突了。

解决方法,onclick里单引号与双引号互换

如果我们单独传一个字符串参数,我们是需要加 / 对其转译,但是JSON序列化之后的字符串,正是自定义对象本身的数据结构。因此我去掉\ 

第二次修改 去掉\

js中onclick传json数据所遇到的问题

js中onclick传json数据所遇到的问题

json传值成功。

为什么会出现 onClick([object object]) ?

出现这种情况,就是我们渲染 dom 节点的时候,是用的字符串拼接形式。所以,对于 onclick 事件中的参数,我们也因该转化成字符串的形式进行拼接。如果传入一个 js 自定义object,那么页面渲染后就会显示[object object]。

为什么会出现 Uncaught SyntaxError: Invalid or unexpected token ?

由于json字符串,它的双引号与onclick控件的双引号起冲突了