如何将JSON对象作为函数参数传递给JavaScript函数？

Question

在我的js函数中，我创建了一个div和一个链接，当点击链接时，我将传递参数给另一个js函数。我的代码有什么问题？

js函数1

 //pass a json:the browser show wrong:SyntaxError: missing ] after element list
 //passJson([object Object])
 var dataItem=getDataItem();//a json object which has title and name property
 var divStr="<div><a style='cursor: pointer' onclick='passJson(" + dataItem +")'><span title='spantitle'><i class='icon-mouse'></i></span></a>;</div>";

所以我尝试在函数中添加 "[]"，但仍然显示错误。

JavaScript函数2

 //pass a json:the browser show wrong:SyntaxError: missing ] after element list
 //passJson([object Object])
 var dataItem=getDataItem();// a json object which has title and name property
 var divStr="<div><a style='cursor: pointer' onclick='passJson([" + dataItem +"])'><span title='spantitle' ><i class='icon-mouse'></i></span></a>;</div>";

- flower

---

什么时候会出现语法错误？ 在您的“passJson”执行了JSON.parse之后。 - sebilasse

严肃地说，为什么要将数据转换为字符串并通过将字符串分配给onclick来传递给函数？天哪，在任何情况下都不是推荐的设计模式。如果您想通过HTML将一些数据与对象关联起来，则将其作为data-xxx属性添加到HTML对象上，然后从事件处理程序中获取该属性。 - jfriend00

你不能像那样使用多行字符串。要么转义换行符，要么将每一行作为一个字符串并连接它们。 - Zirak

在另一个函数中，我也想使用JSON对象的标题和名称。一种方法是传递两个参数（dataItem.title，dataItem.name），另一种方法是传递JSON。我选择了后一种方式，但它似乎是错误的。事实上，这只是一行代码，但格式不允许我将其写在上面。 - flower

我已经再次编辑了问题。 - flower

Answer 1

通常情况下，你不会称之为JSON对象，而是称之为JavaScript对象。

按照你的代码方式，你不需要进行字符串拼接。你可以像这样使用onclick='passJson(dataItem)'

http://jsfiddle.net/6LzCA/5/

function passJson(obj) {
    console.log(obj);
}

var dataItem={ title: "hello", name: "snoopy" }; //a json object which has title and name property

var divStr="<div id='foo'><a style='cursor: pointer' onclick='passJson(dataItem)'><span title='spantitle'><i class='icon-mouse'></i>hmmm</span></a>;</div>";

$("body").append(divStr);

当你点击“hmmm”链接时，它会起作用。

可能你想单独添加标记，然后绑定一个点击处理程序到链接上，因为通常，我们更愿意采用非侵入式JavaScript的方法。

- nonopolarity

---

感谢您的服务。因为按钮和 div 是通过 JavaScript 函数动态创建的，所以在函数中声明它们非常容易。 - flower

Answer 2

function passJson(data) {
  console.log(data); 
}
function getDataItem (){
 return {'title':'mytitle','name':'helloName'}; 
}
$(document).ready(function(){
  var dataItem=getDataItem();// a json object which has title and name property
  dataItem = JSON.stringify(dataItem);
  var divStr="<div><a style='cursor: pointer' onclick='passJson("+dataItem+")'>       hello clik me<span title='spantitle'><i class='icon-mouse'> </i> </span></a>;</div>";
 $('body').html($(divStr));
});

- Maneesh Singh