Javascript dom 解析问题排查

Question

我从字符串创建按钮并将其添加到 DOM。

这是 javascript 代码：

var se = "<button class='btn btn-xs btn-default btn-quick' title='Save Row' onclick=\"jQuery('#jqgrid').saveRow('" + cl + "','" + null + "','" + '../UpdateStatus' + "','" + {'name':"content1"} + "','" + null + "','" + null + "','" + null + "');\"><i class='fa fa-save'></i></button>";

下面是按钮如何附加到 DOM：

 jQuery("#jqgrid").jqGrid('setRowData', ids[0], { act: se });

jqgrid - 是一些 html 元素的 id。

正如您在按钮内部看到的那样，我有 onClick 属性调用名为 saveRow 的函数。

这里是被调用函数的签名：

saveRow: function (rowid, successfunc, url, extraparam, aftersavefunc, errorfunc, afterrestorefunc) {}

我传递给 saveRow 函数的参数之一是 json:

{'name':"content1"}

页面加载后按钮在 DOM 树中的外观：

（抱歉文字太小）

如你所见DOM转换了这个参数（红框）：

{'name':"content1"}

对此：

'[Object object]'

知道为什么 JSON 参数转换为这个 [Object object] 吗？

更新：

这里是 DOM 的样子：

如果我用这种态度：

se = "<button class='btn btn-xs btn-default btn-quick' title='Save Row' onclick=\"jQuery('#jqgrid').saveRow('" + cl + "','" + null + "','" + '../UpdateStatus' + "','" + JSON.stringify({ foo: 'bar' }) + "','" + null + "','" + null + "','" + null + "');\"><i class='fa fa-save'></i></button>";

更新2：

这里是 DOM 的样子：

如果我用这种态度：

se="<button class='btn btn-xs btn-default btn-quick' title='Save Row' onclick='jQuery('#jqgrid').saveRow('" + cl + "','" + null + "','" + '../UpdateStatus' + "','" + JSON.stringify({ foo: 'bar' }) + "','" + null + "','" + null + "','" + null + "');'><i class='fa fa-save'></i></button>";

单击按钮后出现此错误：

Answer 1

那是因为当您尝试将 JSON 添加为 html 时，它会调用函数 toString()，其中 return [Object object] 就像本例中那样。

var obj = {foo: 'bar'};

console.log(obj.toString());

By default, the toString() method is inherited by every object descended from Object. If this method is not overridden in a custom object, toString() returns "[object type]", where type is the object type.

_MDN

如果你想使用你的 JSON 首先使用 JSON.stringify

将其转换为字符串

The JSON.stringify() method converts a JavaScript value to a JSON string

像这样：

var obj = {foo: 'bar'};

var a = "<a onclick='doSome(" + JSON.stringify(obj) + ")'>Do Something</a>";

document.body.innerHTML += a;

function doSome(obj) {
  console.log(obj.foo);
}

更新 2

var cl = 198;

var se = "<button class='btn btn-xs btn-default btn-quick' title='Save Row' onclick='jQuery(\"#jqgrid\").saveRow(\"" + cl + "\", " + null + "," + "\"../UpdateStatus\"," + JSON.stringify({ foo: 'bar' }) + ")'><i class='fa fa-save'></i></button>";

document.body.innerHTML += se;

jQuery.fn.saveRow = function() {
  console.log(arguments);
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

Javascript dom 解析问题排查

Javascript dom parsing troubleshoot

javascript

jquery

json

dom

jqgrid