2017-08-19 14 views
0

ajaxリクエストのサーブレットから以下のjsonレスポンスを取得していますが、データをテーブルに変換してjspに表示できません。以下はjavascriptを使用してJSONレスポンスをHTMLテーブルに変換できません

[{ 
    "ordernumber": 123456, 
    "slotservice": "Collection  ",  
    "deliverydate": "Jul 1, 2017" 
}] 

、誰もが私が間違っているのものを私に説明でき

以下
function addData(){ 
    if(window.XMLHttpRequest) { //Assuming you're not on one of the old IEs. 
    var xhttp = new XMLHttpRequest(); 
    xhttp.open("POST","Order",true);   
    var formData = new FormData(document.getElementById('orderform')); 
    xhttp.send(formData); 
    console.log('This is Ajax request to the order controller'); 
    xhttp.onreadystatechange=function() { 
     if (xhttp.readyState == 4 && (xhttp.status == 200)) { 
      var myArr = JSON.parse(xhttp.responseText); 
      console.log(JSON.stringify(myArr)); 
      var tr; 
      for (var i=0;i<myArr.length;i++){ 
       tr = $('<tr/>'); 
       tr.append("<td>"+myArr[i].ordernumber+ "</td>"); 
       tr.append("<td>"+myArr[i].slotservice+ "</td>"); 
       tr.append("<td>"+myArr[i].deliverydate+ "</td>"); 
       $('ViewOrderResultContainer').append(tr); 
       console.log 
      }    
     } 
     }  
     } 
     else console.log('not working'); 
     } 

<div id="divOrderResultContainer"> 
     <table id="ViewOrderResultContainer" border=1> 
    <thead> 
     <tr> 
      <th>OrderNumber</th> 
      <th>ServiceType</th> 
      <th>DeliveryDate</th> 
     </tr> 
    </thead> 
    </table> 
    </div> 

私のindex.jspの中で定義されたテーブルで、Ajaxのリクエストを行い、私のjavascriptのですここで、どうすれば期待される結果を得ることができますか?

編集1:私は今、以下のように私のサーブレットを更新しましたが、そのはまだ私のJSPでHTMLテーブルの応答を印刷しない

function addData(){ 
    if(window.XMLHttpRequest) { 
    var xhttp = new XMLHttpRequest();  
    xhttp.onreadystatechange=function() { 
     if (xhttp.readyState == 4 && (xhttp.status == 200)) { 
      var jsonorderdata = JSON.parse(xhttp.responseText); 
      for (x in jsonorderdata)  
       txt += "<tr><td>" + myObj[x].ordernumber+ "</td><td>" + 
myObj[x].slotservice+ "</td><td>" + myObj[x].deliverydate+ "</td>" 
       "</tr>"; 
      } 
      document.getElementById("ViewOrderResultContainer").innerHTML = 
txt; 
      } 
      } 
     xhttp.open("POST","Order",true);   
     var formData = new FormData(document.getElementById('orderform')); 
     xhttp.send(formData); 
     } 
    else console.log('not working'); 
} 

さらに私のjavascriptのは、304を与える:クロームでの応答を変更していない、誰もが助けてくださいすることができます私はどのようにJSPでテーブルを取得するかについての私。

+0

@melpomeneで要素を選択する#を追加 - ..fromコンソール・ログの有効なJSONを更新しました。.. – chimbu

答えて

1

$('ViewOrderResultContainer').append(tr);にセレクタがありません。 ID

$('#ViewOrderResultContainer').append(tr); 
+0

こんにちは、私は今、セレクタを追加したが、それはまだテーブルですが、JSPページには表示されません。サーブレットからの応答がJavaScriptに渡されたが、テーブルをフォーマットしていないことがわかります。 – chimbu

関連する問題