如何从html获取文本字段值并将其传递给REST GET服务并在动态HTML表中显示响应

Question

我创建了一个Spring-boot REST服务，它按预期工作，并返回JSON数组作为响应。

端点：

    https://localhost:8081/displayProduct?productId=1234

输出（示例）：

{
 "dataSet":[
            { 
              "productName": "mobile", 
              "product_OS":"Android"
            },
            {
              "productName": "Laptop", 
              "product_OS":"Linux"
            }
         ]
 }

代码：

    @ApiOperation(responseContainer = "request", response = HadoopCALDTO.class, value = "shows_component")
    @Produces(MediaType.APPLICATION_JSON)
    @Consumes(MediaType.APPLICATION_JSON)
    @RequestMapping(value = "/displayProduct", produces = MediaType.APPLICATION_JSON, method = RequestMethod.GET)
    @ResponseBody
    public ResponseEntity<String> getETLResponse(@RequestParam("productId") String productId)
            throws Exception {
        Map<String, String> data = new HashMap<String, String>();
        Map<String, String> dataError = new HashMap<String, String>();
        String response = Utils.sendGET(ConfigReader.getProperty("getBaseURL")
                + productId);
        data = Utils.getHttpUrl(response, productId);
        System.out.println(data.size());

        if (Utils.getDataError().size() > 0) {
            Utils.getDataError().clear();
        }
        for (Map.Entry<String, String> getValue : data.entrySet()) {
            String tempUrl = Utils.replaceUrl(getValue.getKey());
            System.out.println(tempUrl);
            String tempresponse = Utils.sendGET(tempUrl);
            Utils.getErrorData(tempresponse);
        }

        System.out.println(dataError.size());

        String finalResponse = Utils.buildJSONSkelton(Utils.getDataError());

        System.out.println(finalResponse);

        return new ResponseEntity<String>(finalResponse,HttpStatus.OK);
    }

上面的代码工作得很好。我在邮递员中测试了端点，该端点返回了200 Ok响应和预期的正确响应主体。

以上代码我有一个JSON，我将它存储在“ finalResponse”字符串变量中，并将其显示为响应主体（上述示例输出）。

我获取productId是用户的输入，并获取结果并发布数据。我只想在自适应HTML页面中执行此操作。就像我只需要一个文本框，用户需要在其中输入产品ID并单击“提交”按钮。然后将该值传递到REST客户端，并在HTML页面中以表视图的形式显示JSON数组结果。

真的，我不知道如何开始。我对Web应用程序开发非常陌生，不确定如何实现。搜寻有关Spring MVC和一些名为xmlhttprequest javascript的库的信息。但是不确定如何从文本字段中获取值并将其传递给REST客户端并等待重新放置（从hadoop获取所有productID大约需要20秒钟）JSON数组并将结果显示为动态HTML表，如下所示。

S.No ||产品名称||产品_操作系统1 ||手机||安卓系统2 ||笔记本电脑|| Linux

[请有人可以帮助我。

Answer 1

[请在下面的代码片段中找到，这里我将ajax响应呈现到表中，您可能可以将此ajax调用附加到任何事件/表单提交中

HTML：

<table id="myTable">
 <tr>
    <th>Zipcode</th>
    <th>City</th>
    <th>County</th>
 </tr>
</table>

JS：

$.ajax({
url: 'data.json',
dataType: 'json',
success: function(data) {
    for (var i=0; i<data.length; i++) {
        var row = $('<tr><td>' + data[i].zipcode+ '</td><td>' + data[i].city + '</td> 
<td>' + data[i].county + '</td></tr>');
        $('#myTable').append(row);
    }
},
error: function(jqXHR, textStatus, errorThrown){
    alert('Error: ' + textStatus + ' - ' + errorThrown);
}
});