JS中字符串拼装含有Json对象为参数的函数

最近在写js的时候遇到了一个低级问题,但是解决它废了一些周折,现在记录下来以后当乐呵看看。

<%@ page language="java" pageEncoding="UTF-8"%>
<!DOCTYPE HTML>
<html>
<head>
<title>测试页面</title>
<link href="bootstrap/css/bootstrap.min.css" rel="stylesheet">
<script type="text/javascript" src="js/jquery-1.9.1.min.js"></script>
<script type="text/javascript" src="bootstrap/js/bootstrap.min.js"></script>
</head>

<script type="text/javascript">
    function test() {
        var jsonObj = {"a1":"b1"};
        itemContent = "<button type=button onClick='show(" + jsonObj + ")'>测试</button>"
        //alert(itemContent)
        $(".start").after(itemContent);
    }
    
    function show(json) {
        for(var key in json){
            alert(key + " " + json[key])
        }
    }
</script>

<body onload="test()">
    <hr class="start"/>
</body>
</html>

非常简单的一个逻辑,就是动态拼装一个button,点击后会触发一个传入json对象的函数。但是点击后浏览器总是报一个错误:

SyntaxError: missing ] after element list

查看了一下对应的代码行,是这个:

 itemContent = "<button type=button onClick='show(" + jsonObj + ")'>测试</button>"

左看右看,没发现什么问题,而且看报错还感觉是格式问题,所以试了各种加转义等方法,都不管用... 最后,决定打印出来这个拼装的字符串才发现了端倪:

1.png

原来,拼装字符串的时候也把Json对象变为了字符串合并了,并不是把json内容合并。既然问题找到了,那就用json字符串好了,改为:

itemContent = "<button type=button onClick='show(" + JSON.stringify(jsonObj) + ")'>测试</button>"
1.png

测试成功!

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容