RESTful Webサービスを介して取得したデータベース値をJSPページに表示

Question

Jax-Rを使用してメッセンジャーを実装しています。実装されたAPIを使用するクライアントアプリケーションがあります。メッセージ内のmessage_id、message、date、送信者フィールドが格納されます。私はこれらの値をクライアントアプリケーションのjspページのdiv内に表示する必要があります。

client.jsp

<form action="ClientServlet" method ="post" onclick="onTechIdChange();"></form> 
     <div id="uploadSuggest" class="center-block"> 
     <div id="suggestHeading" class="row"> 
        <h4 class="textTitle center-block"> Messages </h4> 
       </div>  
        <div class="row"> 
        <div class="col-md-8"> 
      <a id="btn_padding" href="#download" class="btn btn-image pull-left" onclick="onTechIdChange();">Create Profile</a> 
      <p> </p> 
        </div> 
        </div> 

    </div> 
     </div> 
    </section> 

    <script> 

    function onTechIdChange() { 

      var urlPath = "http://localhost:8081/messanger/webapi/messages" ; 
      $.ajax({ 
      url : urlPath, 
      dataType : "json", 
      cache: false, 
      type : 'GET', 
      success : function(result) { 
       var details = result[0]; 
       var name; 
       for(name in details) 
        { 
        dispatchEvent(event) 
        } 
       alert(details.sender); 
      }, 
      error : function(jqXHR, exception) { 
      alert('An error occurred at the server'); 
      } 
      }); 
      function display(msg) { 
       var p = document.createElement('p'); 
       p.innerHTML = msg; 
       document.body.appendChild(p); 
       } 
     } 
    </script> 

Through this code nothing is displayed in the div. But values are printed in the tomcat console which ensures that all the methods within API are working properly. Do you have any idea? Thank you in advance 


UPDATE 

I Updated the javascript code snippet. But nothing is displayed inside the <p> tag 



    var urlPath = "http://localhost:8081/messanger/webapi/messages" ; 
    $.ajax({ 
    url : urlPath, 
    dataType : "json", 
    cache: false, 
    type : 'GET', 
    success : function(result) { 
     var details = result[0]; 
     var name; 
     for(name in details.sender) 
      { 
      display(name); 
      } 
     alert(details.sender); 
    }, 
    error : function(jqXHR, exception) { 
    alert('An error occurred at the server'); 
    } 
    }); 
    function display(msg) { 
     var p = document.createElement('p'); 
     p.innerHTML = msg; 
     document.body.appendChild(p); 
     } 
} 

This is the section with the <p> 

    <form action="ClientServlet" method ="post" onclick="onTechIdChange();"></form> 
     <div id="uploadSuggest" class="center-block"> 
     <div id="suggestHeading" class="row"> 
        <h4 class="textTitle center-block"> Messages </h4> 
       </div>  
        <div class="row"> 
        <div class="col-md-8"> 
      <a id="btn_padding" href="#download" class="btn btn-image pull-left" onclick="onTechIdChange();">Create Profile</a> 
      <p> </p> 
        </div> 
        </div> 

    </div> 
     </div> 
    </section> 

誰かがあなたがリンクをアップロードすることができ、このについてのチュートリアルを知っていますか？

Answer 1

DOMに値を追加する表示機能を呼び出さないと思います。

for(name in details){ 
    display(name) 
    } 

はまた、私は、

success : function(result) { 
      var details = result[0]; -- Extract the first value of response 
      var name; 
      for(name in details) --- should be an array as well 
       { 
       dispatchEvent(event) -- I think here you need to call print function 
       } 
      alert(details.sender); -- If details.sender have the details probably the 
             iteration should be for(name in details.sender) 
     }, 

はまた、私はおそらく、$.ajaxの使用を再考$.getが優れているとも使用したいパーサが正しいことを確認していない私が使用シンプルに必要とされていると思ういけないJSPの使用しますJavaScriptを使ってhtml