Question

JSON对象：

{"id":75,"year":2011,"make":"Aston Martin","model":"V12 Vanquish"}

jQuery的：

function post() {
  $("form").on("ajax:success", function(e, data, status, xhr) {
    var json = JSON.parse(xhr.responseText);
    $.each(json, function(k, v) {
      $("#vehicle_record").append('<li class="'+k+'">'+v+'</li>');
    });
  });
}

HTML页面输出：

75
2011
Aston Martin
V12 Vanquish
75
2011
Aston Martin
V12 Vanquish

问题：

为什么输出会呈现两次？（我只期待它一次）
有没有更好的方法将JSON呈现给页面？（请告知）

- UPDATE -

以下介绍用户体验：
FORM ONE：name＆gt; 点击下一步＆gt; post＆gt;表格TWO＆gt;选择车辆＆gt; 点击下一步＆gt; post＆gt;看车辆选择：添加另一辆车？ Y（返回表格2）/ N（继续...）

我需要能够独立地为每个模型使用post而不受干扰。那么我如何获得提交给车辆模型的所有JSON对象呢？（我需要这个帖子功能是模块化的）

也许我可以做这样的事情？：

function post() {
  $("form").on("ajax:success", function(e, data, status, xhr) {
    var json = JSON.parse(xhr.responseText);
    var model = e.currentTarget.action;
    renderOnPage(json, model);
  });
}
function renderOnPage(data, model) {
  if ( model.match(/vehicles/) ) {
  $.each(data, function(k, v) {
    $("#vehicle_record").append('<li class="'+k+'">'+v+'</li>');
  });
  }
}

Answer 1

在HTML上呈现JSON（不使用第三方库）的更好或最好的方法是提出这样的结论：

<html>
<body>
<span>ID</span>: <span json-path="id"></span>
<span>Year</span>: <span json-path="year"></span>
<span>Make</span>: <span json-path="make"></span>
<span>Model</span>: <span json-path="model"></span>
</body>
</html>

其中json-path只是您想要提供的任何属性名称。现在，在AJAX成功的时候，你应该做这样的事情：

function refreshPage(data) {
   $("[json-path]", $(document)).each(function() {
    $(this).text(data[$(this).attr("json-path")]);
   });
}

现在，如果您需要更复杂的功能，比如在表格或LIST中显示JSON中的项目数组，那么只需在上面的refreshPage中添加switch case语句

 switch((this).prop('tagName')) {
        case "INPUT":
           $(this).val(data[$(this).attr("json-path")])

使用这种方法，您甚至可以将json路径映射到JSON路径上的数组，用于TABLE或SELECT标记，然后使用switch case来识别和呈现每种类型的元素。

Answer 2

您的post函数实际上将处理程序绑定到success事件两次，因此很明显它已执行两次。您实际上并不需要显式调用函数。简单

$("form").on("ajax:success", function(e, data, status, xhr) {
    var json = JSON.parse(xhr.responseText);
    $.each(json, function(k, v) {
      $("#vehicle_record").append('<li class="'+k+'">'+v+'</li>');
    });
});

会奏效。不要在点击次数post上致电

呈现对HTML页面的JSON响应

2 个答案: