Question

我有一个简单的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并将其转换为HTML表的问题完全感到困惑。

任何输入均受到高度赞赏。 TIA !!!

Answer 1

您还没有发布任何JavaScript，但听起来您需要以任何可监听点击的代码调用event.prventDefault()：

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

Answer 2

假设您无法编辑后端，我的最佳猜测是捕获表单提交事件并发送AJAX请求，然后解析响应并相应地显示表格。

这假设表单托管在要提交表单的同一服务器上，否则您将不得不代理请求。

但是，您需要考虑以下因素：

该表是否基于用户输入？如果是这样，那么输入是否在服务器端进行了清理？
您的JSON文件的结构如何？

我建议您学习HTML Tables JSON parsing in JavaScript和DOM manipulation in Javascript。

将json输出转换为HTML表

2 个答案: