如何将Json更改为Html输出

Question

您好我正在使用Restful网络服务为华氏温度和摄氏温度开发一个简单的转换器。

目前我使用以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使用，是使用jQuery调用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>

次要建议：如果有CORS问题，请使用您的服务器提供html页面。

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

Answer 2

如上所述，jsbin（http://jsbin.com/befifu/14/edit?html,css,js,output）中有一个演示。其中使用静态json文件来模拟其余的api。