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

How do I change my Json to Html output

您好,我目前正在使用 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>

这是当前输出的样子

任何帮助都会很棒

我能想到的将 JSON 响应作为 HTML 使用的最简单的解决方案是使用 ajax call with jQuery. If you're not to familiar with jQuery (or Javascript) I suggest you do some reading. A primer for doing so (even though you're not using 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 问题。

如果您要创建供客户端使用的 REST 端点(例如上面的 javascript 客户端),那么我建议您也多读一些书,您很快就会看到以上代码无法帮助您构建客户端。

同上,jsbin(http://jsbin.com/befifu/14/edit?html,css,js,output)中有demo。其中使用静态 json 文件来模拟其余 api.