最近在寫js的時(shí)候遇到了一個(gè)低級(jí)問題阻肿,但是解決它廢了一些周折傅是,現(xiàn)在記錄下來以后當(dāng)樂呵看看。
<%@ 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>
非常簡單的一個(gè)邏輯构订,就是動(dòng)態(tài)拼裝一個(gè)button侮叮,點(diǎn)擊后會(huì)觸發(fā)一個(gè)傳入json對象的函數(shù)。但是點(diǎn)擊后瀏覽器總是報(bào)一個(gè)錯(cuò)誤:
SyntaxError: missing ] after element list
查看了一下對應(yīng)的代碼行鲫咽,是這個(gè):
itemContent = "<button type=button onClick='show(" + jsonObj + ")'>測試</button>"
左看右看,沒發(fā)現(xiàn)什么問題谷异,而且看報(bào)錯(cuò)還感覺是格式問題分尸,所以試了各種加轉(zhuǎn)義等方法,都不管用... 最后歹嘹,決定打印出來這個(gè)拼裝的字符串才發(fā)現(xiàn)了端倪:
1.png
原來箩绍,拼裝字符串的時(shí)候也把Json對象變?yōu)榱俗址喜⒘耍⒉皇前裫son內(nèi)容合并尺上。既然問題找到了材蛛,那就用json字符串好了,改為:
itemContent = "<button type=button onClick='show(" + JSON.stringify(jsonObj) + ")'>測試</button>"
1.png
測試成功怎抛!