呈現出一個JSON效應初探到HTML頁面

JSON對象：呈現出一個JSON效應初探到HTML頁面

{"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--

下通過UX的散步：
形成一個：名稱>單擊下一步>post>形成兩個>選擇交通工具>單擊下一步>post>看車選擇的是：添加其他車輛？ Y（BACK形成兩個）/ 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>'); 
    }); 
    } 
}

來源

2014-03-01 fyz

看起來像「post」被稱爲兩次的方法!!! –

什麼是'ajax：success'事件？這不是一個標準的jQuery事件，AFAIK。 – Barmar

你可以在post方法中添加一個控制檯作爲第一行並查看它被調用的次數 –

你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

來源

2014-03-01 03:58:10

更好或呈現JSON的HTML（不使用第三方庫），也許最好的辦法是要來up這樣的事情：

<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")]); 
    }); 
}

現在，如果你需要更復雜的功能，如顯示在表格中的項目插件JSON或列表的數組，那麼只需在上面添加一個開關case語句refreshPage

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

使用這種方法，你甚至可以你的JSON路徑映射到JSON路徑上的數組表或SELECT標籤，然後使用開關的情況下識別並呈現不同每種類型的元素。

來源

2014-03-01 01:26:49 TechMaze

嘿，謝謝你的建議，你可能會分享一個鏈接一個你的建議實施的完整例子。再次感謝。 – fyz

呈現出一個JSON效應初探到HTML頁面

回答

相關問題