0
私は宿題をしていて、私のajaxでjavascriptのオブジェクトと配列を使わなければなりません。私はコードに何か間違っていると確信していますが、私は非常に知識が限られているので、私はそれを見つけることができません。私はちょうど今これを学んでいるし、いくつかのビットと作品は、私がオンラインで見つけることができます例に従っていた。問題の実行AJAX
XML
<?xml version="1.0" encoding="UTF-8" ?>
<onlineOrder month="03/2015">
<product>
<code>CRA01</code>
<unitPrice>10.50</unitPrice>
<lastMonth>101</lastMonth>
<thisMonth>120</thisMonth>
</product>
<product>
<code>CRA02</code>
<unitPrice>21.30</unitPrice>
<lastMonth>50</lastMonth>
<thisMonth>43</thisMonth>
</product>
<product>
<code>HOB11</code>
<unitPrice>8.50</unitPrice>
<lastMonth>201</lastMonth>
<thisMonth>312</thisMonth>
</product>
<product>
<code>HOB13</code>
<unitPrice>43.50</unitPrice>
<lastMonth>20</lastMonth>
<thisMonth>21</thisMonth>
</product>
<product>
<code>JEW21</code>
<unitPrice>200.00</unitPrice>
<lastMonth>7</lastMonth>
<thisMonth>11</thisMonth>
</product>
<product>
<code>JEW22</code>
<unitPrice>450.00</unitPrice>
<lastMonth>10</lastMonth>
<thisMonth>4</thisMonth>
</product>
<product>
<code>GAM41</code>
<unitPrice>20.30</unitPrice>
<lastMonth>420</lastMonth>
<thisMonth>450</thisMonth>
</product>
<product>
<code>GAM42</code>
<unitPrice>45.50</unitPrice>
<lastMonth>361</lastMonth>
<thisMonth>180</thisMonth>
</product>
</onlineOrder>
HTML - テーブル付きの部分は、私はかなり簡単に自分自身をうまくことができるものです。問題は、私はボタンを表示しているだけで、押しても何も表示されていないということです。私はjQueryを使用していないし、持っていないので、これは対処する痛みである場合はごめんなさい。
<script>
function getOnlineOrderAjax() {
var xhttp = new XMLHttpRequest();
xhttp.onreadystatechange = function() {
if (xhttp.readyState == 4 && xhttp.status == 200) {
processResult(xhttp);
}
};
xhttp.open("GET", "A8.xml", true);
xhttp.send();
}
function processResult(xhttp) {
var xml = xhttp.responseXML;
var onlineOrderObj = parseXML(xml);
console.log(onlineOrderObj);
display(onlineOrderObj);
}
function parseXML(xml) {
var onlineOrderObj = {}; //hold information
var onlineOrderElement = xml.getElementsByTagName("onlineOrder")[0];
onlineOrderObj.month = onlineOrderElement.getAttribute("month");
onlineOrderObj.productList = []; //create array
var productElements = onlineOrderElement.getElementsByTagName("product");
for(var i = 0; i < productElements.length; i++) {
var product = {}; //create index object
product.code = productElements[i].getElementsByTagName("code")[0].childNodes[0].nodeValue;
product.unitPrice = Number(indexElements[i].getElementsByTagName("unitPrice")[0].childNodes[0].nodeValue);
product.lastMonth = Number(indexElements[i].getElementsByTagName("lastMonth")[0].childNodes[0].nodeValue);
product.thisMonth = Number(indexElements[i].getElementsByTagName("thisMonth")[0].childNodes[0].nodeValue);
onlineOrderObj.productList.push(product); //object into array
}
return onlineOrderObj;
}
function display(onlineOrderObj){
var change = 0;
var html = "<h1>Online order statistics for " + onlineOrderObj.month + "</h1>";
html += "<table border='1'>";
html += "<tr><th>Code</th><th>Unit Price</th><th>Last Month </th><th>This Month</th></tr>";
for(var i=0; i < onlineOrderObj.productList.length; i++) {
html += "<tr>";
html += "<td align='center'><b>" + onlineOrderObj.productList[i].code + "</b></td>";
html += "<td align='right'>" + onlineOrderObj.productList[i].unitPrice + "</td>";
html += "<td align='right'>" + onlineOrderObj.productList[i].lastMonth + "</td>";
html += "<td align='right'>" + onlineOrderObj.productList[i].thisMonth + "</td>";
html += "</tr>";
}
html += "</table>";
var onlineOrderDiv = document.getElementById("onlineOrderDiv");
onlineOrderDiv.innerHTML = html;
}
</script>
</head>
<body>
<button onClick="getOnlineOrderAjax()">
Click here to view online order statistics
</button>
<br /><br />
<div id="onlineOrderDiv" />
</body>
</html>
1の問題をチェックアウトすることができますが、あなたが正しくあなたの質問は何#onlineOrderDiv divの – Cruiser
をクローズする必要があるということですか？ – brso05
なぜこのajaxですか？一般公開されているxmlファイルを読み込んでいるようですが、どうして非同期でそれを行う必要がありますか？ – deltree