最近在写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>"
左看右看,没发现什么问题,而且看报错还感觉是格式问题,所以试了各种加转义等方法,都不管用... 最后,决定打印出来这个拼装的字符串才发现了端倪:
原来,拼装字符串的时候也把Json对象变为了字符串合并了,并不是把json内容合并。既然问题找到了,那就用json字符串好了,改为:
itemContent = "<button type=button onClick='show(" + JSON.stringify(jsonObj) + ")'>测试</button>"
测试成功!