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

Question

I have created a Spring-boot REST service and It's working as expected and returned JSON array as response.我创建了一个 Spring-boot REST 服务，它按预期工作并返回 JSON 数组作为响应。

End Point:终点：

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

Output(Example):输出（示例）：

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

Code:代码：

    @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);
    }

The above code works perfectly fine.上面的代码工作得很好。 I tested the End point in postman which returned 200 Ok response and proper response body as expected.我在邮递员中测试了端点，它按预期返回了 200 Ok 响应和正确的响应正文。

The above code I have a JSON that I stored in "finalResponse" string variable and showing it as response body (Sample output mentioned above).上面的代码我有一个 JSON，我将它存储在“finalResponse”字符串变量中并将其显示为响应正文（上面提到的示例输出）。

I'm getting the productId is the input from user and getting the result and publishing the data.我得到的 productId 是来自用户的输入并获取结果并发布数据。 And I just want to do this from Responsive HTML page.我只想从响应式 HTML 页面执行此操作。 Like I just need a text box where the user needs to enter the product id and click submit button.就像我只需要一个文本框，用户需要在其中输入产品 ID 并单击提交按钮。 And the value is pass into the REST client and displaying the JSON array result as table view in HTML page.并将该值传递到 REST 客户端并将 JSON 数组结果显示为 HTML 页面中的表格视图。

Really I don't have any idea how to kick start this.真的我不知道如何开始这个。 I'm very new to web application development, and not sure how to achieve this.我对 Web 应用程序开发很陌生，不知道如何实现这一点。 Googled about Spring MVC and some library called xmlhttprequest javascript.在谷歌上搜索了 Spring MVC 和一些名为 xmlhttprequest javascript 的库。 But not sure how to get the value from text field and pass it to REST client and wait for respose (It takes close to 20 seconds to fetch all the productID from hadoop) JSON array and display the result as dynamic HTML table as like below.但不确定如何从文本字段获取值并将其传递给 REST 客户端并等待响应（从 hadoop 获取所有 productID 需要近 20 秒）JSON 数组并将结果显示为动态 HTML 表，如下所示。

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

Please can someone help me on this.请有人帮我解决这个问题。

Updates:更新：

I just tried the below steps to hit the REST client and get the response as dynamic html table我只是尝试了以下步骤来访问 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>

Observed below Error message:观察到以下错误消息：

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

Answer 1

Please find below code snippet, here I am rendering ajax response into a table, you can probably make this ajax call attach to any event/ form submit请找到下面的代码片段，这里我将 ajax 响应渲染到一个表中，您可以将此 ajax 调用附加到任何事件/表单提交

HTML: 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: 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 表中显示响应

问题描述

1 个解决方案

解决方案1
0 已采纳 2019-12-17 18:41:30

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

问题描述

1 个解决方案

解决方案1 0 已采纳 2019-12-17 18:41:30

解决方案1
0 已采纳 2019-12-17 18:41:30