摘取自CSDNqq_34412985大佬的博客
-
今天在开发的时候遇到一个问题, 在js动态渲染页面的时候(前后端不分离项目), 后台PHP这边需要传入一个参数给他, 是一个对象.
代码
图里是模板字符串和要渲染的元素, 需要点击购物车button按钮, 弹窗弹窗框, 点击事件传入一个对象
但是我们直接传入对象, 去点击事件里打印, 会发现
<button onclick="handleClick(row)"></button>
function handleClick(row) {
console.log(row)
}
假设row是一个对象的话,会报Sncaught SyntaxError: Unexpected identifier错误。
经查，onclick（对象）这种传递对象形式里面的对象会变成onclick（[object Object]）
为什么会出现 onClick([object object])
- 出现这种情况，就是我们渲染 Dom 节点的时候，是用的字符串拼接形式。所以，对于 onclick 事件中的参数，我们也因该转化成字符串的形式进行拼接。如果传入一个 js 自定义对象，那渲染后的页面上的 dom 就会出现 onClick([object object]) 这种形式。
问题解决思路
-
将传递的对象参数转化为json字符串，需要的时候再将json字符串的双引号转换成单引号就可以
问题解决方法 -
用JSON.stringify().replace(/""/g,"’")方法将对象转化成JSON字符串传递，函数接收后会变成对象
问题解决过程 -
JSON.stringify()将对象转化成JSON字符串；.replace(/""/g,"’")将JSON字符串中的双引号转化成单引号，不然会报Unexpected end of input错误（这个错误是由于带的json字符串。它的双引号与onclick控件的双引号冲突了）
传递参数
-
var $row = JSON.stringify(row).replace(/\"/g,"'");//row的是一个对象 -
<a href="#" οnclick="editParentRow('+$row+')">编辑</a>//拼接传递对象
接收参数
-
function editParentRow(obj){
-
console.log(obj);//console打印
-
alert(obj);//提示框
pageHtml+="<a href='#' οnclick='gotoP(\""+value+"\",\""+tabId+"\","+(pageNo+1)+","+dataFlag+","+elements+")'>下一页></a>";
function gotoP(searchValue,tabId,pageNo,dataFlag,element){
findData(searchValue,tabId,pageNo,dataFlag,JSON.stringify(element));
}
onclick传入的为string，在gotoP函数中element类型变为object，类似于类型提升
所以我这边的解决代码是
`<button onclick="handleClick(${JSON.stringify(row).replace(/\"/g,"'")})"></button>`
function handleClick(row) {
console.log(row)
}
这样就可以打印出这个对象了
网友评论