如何从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

[请有人可以帮助我。

更新：

我只是尝试了以下步骤以点击REST客户端并获得动态html表的响应

<html>
<head>
<script type="text/javascript">
function myFunction() {
var name = document.getElementById("name").value;
var dataString = 'calId=' + name ;

if (name == '') {
alert("Please Fill All Fields");
} else {
 $.ajax({
 url: 'http://localhost:8081/api/displayProduct?',
 data: dataString
 dataType: 'json',
 success: function(data) {
    for (var i=0; i<data.length; i++) {
        var row = $('<tr><td>' + data[i].productName+ '</td><td>' + 
 data[i].product_os + '</td> </tr>');
        $('#myTable').append(row);
    }
 },
 error: function(jqXHR, textStatus, errorThrown){
    alert('Error: ' + textStatus + ' - ' + errorThrown);
 }
 });
}
}
</script>
</head>
<body>
<form id="form" name="form">
<h3>Fill Your Information!</h3>
<div>
<label>Name :</label>
<input id="name" type="text">

<input id="submit" onclick="myFunction()" type="button" value="Submit">

</div>
</form>
</body>
</html>

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

观察以下错误消息：

MyTest_sta.html:39 Uncaught ReferenceError: myFunction is not defined
    at HTMLInputElement.onclick (MyTest_sta.html:39)

Answer 1

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

HTML：

<form id="form" name="form">
<h3>Fill Your Information!</h3>
<div>
<label>Name :</label>
<input id="name" type="text">
<label>Email :</label>
<input id="email" type="text">

<input id="submit" onclick="myFunction()" type="button" value="Submit">
</div>
</form>

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

JS：

function myFunction() {
var name = document.getElementById("name").value;
var email = document.getElementById("email").value;
var dataString = 'name1=' + name + '&email1=' + email;

if (name == '' || email == '') {
alert("Please Fill All Fields");
} else {
 $.ajax({
 url: 'https://localhost:8081/displayProduct?productId=1234',
 data: dataString
 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);
 }
 });
}
}

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

问题描述投票：0回答：1

1个回答

最新问题

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

问题描述 投票：0回答：1

1个回答

最新问题

问题描述投票：0回答：1