如何将我的 Json 更改为 Html 输出

Question

您好，我目前正在使用 Restful Web 服务为华氏和摄氏度开发一个简单的转换器。

目前我使用以下用 java 编写的代码在 json 中打印出值

//JSON Converted Values 
//Fahrenheit to Celsius converter
@GET
@Path("/fjson/{number1}")
public String FJson(@PathParam("number1") double num1){
    //String output = Double.toString((1.8)*num1 - 32);
    Gson gson = new Gson();
    String output = gson.toJson(new Result (Double.toString(5.0/9.0*(num1 - 32))));
    //Response response = Response.status(200).entity(output).build();
    return output;
    
}
//Celsius to Fahrenheit converter
@GET
@Path("/cjson/{number1}")
public String CJson(@PathParam("number1") double num1){
    //String output = Double.toString((1.8)*num1 - 32);
    Gson gson = new Gson();
    String output = gson.toJson(new Result (Double.toString((1.8)*num1 + 32)));
    //Response response = Response.status(200).entity(output).build();
    return output;
    
}

但我希望能够调用这些方法，例如一个带有框和按钮的简单页面，用户可以在其中输入值，然后转换并输出一个简单的 html 值，比如 <p>

这是当前输出的样子

任何帮助都会很棒

Answer 1

我能想到的最简单的解决方案是将 JSON 响应作为 HTML 使用，是使用带有 jQ​​uery 的 ajax 调用。如果您不熟悉jQuery（或Javascript），我建议您使用some reading。这样做的入门书（即使您没有使用 Spring）can be found here。

您的解决方案可能是一个带有示例 html 的文件，如下所示：

<input id="input" type="text">
<input id="change" type="button" value="Click me">
<p id="output"></p>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
<script>
    var input = $("#input");
    var output = $("#output");
    $("#change").on('click', function() {
        $.ajax({
            'url' : 'http://localhost:8080/api/convertor/cjson/' + input.val(),
            'type' : 'GET',
            'dataType' : 'json',
            'success' : function(data) {
                output.html(data.converted);
            }
        });
    });
</script>

次要建议：使用您的服务器提供 html 页面，以防出现 CORS 问题。

如果您正在创建将由客户端（例如上面的 javascript 客户端）使用的 REST 端点，那么我建议您也多阅读一些内容，因为您很快就会看到上面的代码没有t 帮助您构建客户端。

Answer 2

和上面一样，jsbin(http://jsbin.com/befifu/14/edit?html,css,js,output)中有一个demo。其中使用静态json文件来模拟rest api。