Как изменить вывод Json на Html

Question

Привет В настоящее время я разрабатываю простой конвертер для Fahrenheit и Цельсия, используя Restful web services.

В настоящее время у меня есть ценности печати в формате JSON, используя следующий код, написанный на 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; 

} 

Но я хочу, чтобы иметь возможность вызывать эти методы скажут, например, простая страницу с коробкой и кнопкой, где пользователь вводит значение и преобразователи и вывода в простом значении HTML сказать <p>

Вот что выходной ток выглядит

Любая помощь будет большим

Answer 1

Простейшее решение, которое я могу рассматривать, чтобы использовать ответы JSON в качестве HTML, заключается в использовании вызова ajax с jQuery. Если вы не знакомы с 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.

Если вы создаете конечные точки REST, которые должны быть использованы клиентом (например, как клиент javascript, например, выше), я бы предложил также сделать еще немного чтения, так как вы быстро увидите, что приведенный выше код не работает 't помочь вам построить клиента.

Answer 2

Как и выше, есть демонстрация в jsbin (http://jsbin.com/befifu/14/edit?html,css,js,output). Который использует статический json-файл для имитации остального api.