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

Question

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

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

下面是我的 javascript，它执行 ajax 请求，

    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 在 chrome 中给出 304:notmodified 响应，任何人都可以帮助我如何在 jsp 中获取表格。

Answer 1

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

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