将 json output 转换为 HTML 表

Question

I have a simple html page that has a form which takes input and upon clicking the button, it sends GET request to the backend server.我有一个简单的 html 页面，该页面有一个接受输入的表单，单击按钮后，它将 GET 请求发送到后端服务器。 I receive the response from the backend server in json format.我收到来自后端服务器的 json 格式的响应。 My html file is as follows我的 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>

Now, I get redirected to another page on clicking submit button and a json response gets displayed as follows现在，我在单击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
}

I want to convert this json to a HTML table format.我想将此 json 转换为 HTML 表格格式。 I am a complete newbie to javascript and html and am completely confused as to where I need to write a script to capture this json and convert it to a HTML table.我是 javascript 和 html 的完整新手，我完全不知道我需要在哪里编写脚本来捕获这个 json 并将其转换为一个 json 表并将其转换为一个 json 表。

Any inputs are highly appreciated.任何输入都受到高度赞赏。 TIA !!!蒂亚！！！

Answer 1

You haven't posted any javascript, but it sounds like you need to call event.prventDefault() in whatever code listens for the click:您还没有发布任何 javascript，但听起来您需要在任何代码中调用event.prventDefault()来监听点击：

 document.getElementById("myAnchor").addEventListener("click", function(event){
  event.preventDefault()
});

Answer 2

Assuming you cannot edit the backend, my best guess would be to capture the form submit event and send an AJAX request, then parse the response and display the table accordingly.假设您无法编辑后端，我最好的猜测是捕获表单提交事件并发送 AJAX 请求，然后解析响应并相应地显示表格。

This assuming the form is hosted on the same server the form is going to be submitted to, otherwhise you will have to proxy the requests.这假设表单托管在表单将要提交到的同一台服务器上，否则您将不得不代理请求。

However you need to consider the following:但是，您需要考虑以下事项：

Is the table based on user input?该表是否基于用户输入？ If so, is that input sanitized server side?如果是这样，该输入是否经过了服务器端的清理？
How is your JSON file structured?您的 JSON 文件的结构如何？

I suggest you to learn about HTML Tables JSON parsing in JavaScript and DOM manipulation in Javascript .我建议您学习 JavaScript 中的HTML 表 JSON 解析和 Z9E13ZB69D1D2DAA9371 中的 DOM 操作

将 json output 转换为 HTML 表

问题描述

2 个解决方案

解决方案1
0 2019-11-10 20:45:12

解决方案2
0 2019-11-10 20:45:46

将 json output 转换为 HTML 表

问题描述

2 个解决方案

解决方案1 0 2019-11-10 20:45:12

解决方案2 0 2019-11-10 20:45:46

解决方案1
0 2019-11-10 20:45:12

解决方案2
0 2019-11-10 20:45:46