將 json output 轉換為 HTML 表
[英]Convert json output to HTML table
問題描述
我有一個簡單的 html 頁面，該頁面有一個接受輸入的表單，單擊按鈕后，它將 GET 請求發送到后端服務器。 我收到來自后端服務器的 json 格式的響應。 我的 html 文件如下
<!DOCTYPE html>
<html>
<br/><br/><br/><br/>
<body>
<form action="http://localhost:9000/parsehtml" method="get">
<h3Enter url :</h3>
<input type="text" name="url" placeholder="http://example.com" style="width: 600px"><br>
<br/><br/>
<input type="submit" name="Get Website Statistics" style="width: 20em; height: 2em;">
</form>
</body>
</html>
現在，我在單擊submit按鈕時被重定向到另一個頁面，並且 json 響應顯示如下
{
"htmlVersion":"HTML5",
"title":"Example Title",
"headings":[
{
"tag":"h1",
"count":1
},
{
"tag":"h2",
"count":2
},
{
"tag":"h4",
"count":2
},
{
"tag":"h5",
"count":4
}
],
"internalLinks":{
"count":1,
"links":[
{
"tagName":"a",
"link":"https://www.example.de/"
}
]
},
"externalLinks":{
"count":66,
"links":[
{
"tagName":"a",
"link":"https://abo.example.de/?bste"
}
]
},
"containsLoginForm":true
}
我想將此 json 轉換為 HTML 表格格式。 我是 javascript 和 html 的完整新手，我完全不知道我需要在哪里編寫腳本來捕獲這個 json 並將其轉換為一個 json 表並將其轉換為一個 json 表。
任何輸入都受到高度贊賞。 蒂亞！！！
2 個解決方案
解決方案1
0 2019-11-10 20:45:12
您還沒有發布任何 javascript，但聽起來您需要在任何代碼中調用event.prventDefault()來監聽點擊：
document.getElementById("myAnchor").addEventListener("click", function(event){
event.preventDefault()
});
解決方案2
0 2019-11-10 20:45:46
假設您無法編輯后端，我最好的猜測是捕獲表單提交事件並發送 AJAX 請求，然后解析響應並相應地顯示表格。
這假設表單托管在表單將要提交到的同一台服務器上，否則您將不得不代理請求。
但是，您需要考慮以下事項：
- 該表是否基於用戶輸入？ 如果是這樣，該輸入是否經過了服務器端的清理？
- 您的 JSON 文件的結構如何？
我建議您學習 JavaScript 中的HTML 表JSON 解析和 Z9E13ZB69D1D2DAA9371 中的DOM 操作
在javascript / jquery中將json轉換為html表輸出
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.