无法使用 javascript 将 JSON 响应转换为 HTML 表

Question

我从 serverlet 获得以下 json 响应，用于 ajax 请求，但无法将数据转换为表格并在 jsp 中显示。

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

下面是我的 ajax 请求的 javascript，

    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');
        }

下面是我的 index.jsp 中定义的表

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

谁能解释我在这里做错了什么以及如何获得预期的结果。

编辑 1：我现在已经更新了我的 servlet，如下所示，但它仍然没有在我的 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:not modified response in chrome ，谁能帮我看看如何在 jsp 中获取表格。

Answer 1

$('ViewOrderResultContainer').append(tr); 中缺少选择器。添加#以通过id选择元素

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