如何将Json更改为Html输出(How do I change my Json to Html output)

如何将Json更改为Html输出(How do I change my Json to Html output) java

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

下面是当前输出的样子

任何帮助都会很棒

Hi I am currently developing a simple converter for Fahrenheit and celsius using Restful web services.

Currently I have values printing out in json using the following code written in java

//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; }

But I want to be able to call these methods say for example a simple page with a box and a button where the user enters the value and it converters and output in a simple html value say a <p>

Heres what the current output looks like

Any help would be great

最满意答案

我能想到的最简单的解决方案是将JSON响应作为HTML使用，即使用jQuery调用ajax 。 如果你不熟悉jQuery （或Javascript），我建议你做一些阅读 。 这样做的入门书（即使你没有使用Spring） 也可以在这里找到 。

您的解决方案可能是一个带有示例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页面。

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

The simplest solution I can think of, to consume JSON responses as HTML, is to use an 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.

Your solution might be a file with example html like below:

<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>

Minor suggestion: serve the html page up with your server, incase there are CORS issues.

If you are creating REST endpoints that are to be consumed by a client (such as a javascript client like above), then I'd suggest also do some more reading, as you'll quickly see that the above code doesn't help you built the client out.