将 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.