JS中字符串拼装含有Json对象为参数的函数
2017-09-03 本文已影响120人
唐T唐X
最近在写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
测试成功！
