javascript - 将 JS 每个循环中的 json 数据传递到 JS 函数时出现意外的输入错误结束

Question

我在表中有一个 jquery foreach 附加列表。我想要的是传递我从 ajax 成功函数获取的完整对象。但是当我尝试将对象作为参数传递给不同的 JS 函数时，参数会出现意外的输入结束。

这是我的附加表格:

$.ajax({
    type: "post",
    url: "@Url.Content("~/Estimate/GetOffsetLetterHeadCost")",
    data: $('#OffLetterHeadForm').serialize(),
    datatype: "json",
    traditional: true,
    success: function(data) {
        var Json = data;
        $.each(Json, function(index, obj) {
            var row = '<tr>' + '<td><b>' + obj.VendorName + '</b></td>' 
                + '<td><label id="machineId' + index + '">' 
                + obj.MachineName + ' </label></td>' 
                + '<td><input type="button" value="Order" id="btn' 
                + index + '"onclick="SaveOffsetOrder(' 
                + JSON.stringify(obj) + ')"/></td></tr>';

                $("#AllVendorsList").append(row);
        });
    }
});

<table id="AllVendorsList"></table>

function SaveOffsetOrder(obj) {  
  // do something with obj
}

在输入关闭时，我收到了意外的输入结束。请帮忙。我是 JavaScript 新手

enter image description here

Answer 1

问题是 JSON.stringify(obj) 不会转义像这样的引号\"并且结果是无效的 html。

我建议使用 jQuery onclick 绑定(bind)，这样你就不必对 obj 进行字符串化然后解析它。

解决方案:https://jsfiddle.net/xpvt214o/452188/

var Json = [{
  VendorName: 'kia',
    MachineName: 'ceed'
  }, {
  VendorName: 'dacia',
    MachineName: 'logan'
}];

$.each(Json, function(index, obj) {
  var row = '<tr>' + '<td> <b>' + obj.VendorName + '</b></td>' + '<td><label id="machineId' + index + '">' + obj.MachineName + '</label></td>' + '<td><input type="button" value="Order" id="btn' + index + '"/></td></tr >';

  $("#AllVendorsList").append(row);
  $("#btn" + index).on('click', $.proxy(SaveOffsetOrder, this, obj));
});

function SaveOffsetOrder(obj) {
  console.info(obj);
}

<table id="AllVendorsList"></table>