-2

我有以下 HTML 文件：

  • 从用户那里获取卡号（通过 HTML 表单），
  • 将其发送到 PHP 文件并获得 JSON 格式的响应（通过 xmlhttp.responseText），
  • 并且应该在表格中显示该响应 - 这是我卡住的地方，因为 1）我不知道如何读取和解析 JSON 格式的响应 2）然后如何在表格中显示它。

下面是代码：

<html>
<head>
    <script>
    function showCardInfo() {
        var xmlhttp;
        if (window.XMLHttpRequest) { // code for IE7+, Firefox, Chrome, Opera, Safari
            xmlhttp = new XMLHttpRequest();
        } else { // code for IE6, IE5
            xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
        }
        xmlhttp.onreadystatechange = function() {
            if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
                document.getElementById("output").innerHTML = xmlhttp.responseText;
            }
        }
        if (document.getElementById("transFlag").checked) {
            xmlhttp.open("GET", "getCardInfo.php?id=" + document.getElementById("cardNo").value + "&transactions=true", true);
        } else {
            xmlhttp.open("GET", "getCardInfo.php?id=" + document.getElementById("cardNo").value, true);
        }

    }
    </script>

</head>

<body>
    <form style="font-family:verdana; font-size: 10pt">
        <p>
            Card number:
            <input type="text" id="cardNo" />
            <input type="checkbox" id="transFlag" checked="checked" />Include transactions
        </p>
        <p>
            From:
            <input type="date" id="fromdate" />To:
            <input type="date" id="todate" />
            <button type="button" style="width: 100px; height: 20px;" onclick="showCardInfo()">Enter</button>
        </p>
    </form>
    </br>

    <div id="output">
    </div>
</body>
</html>

JSON 格式是这样的：

{
    "id": "123",
    "createdate": "2013-07-30 21:11:19",
    "balance": "10000",
    "expirationdate": "2013-09-30 23:59:59",
    "status": "active",
    "createdby": null,
    "signature": null
}
4

2 回答 2

1

在您的onreadystatechange处理程序中，将检索到的 json 放在一个变量中。并处理数据以构建表格并将表格放置在 div 中。

xmlhttp.onreadystatechange=function() {
if (xmlhttp.readyState==4 && xmlhttp.status==200) {
   var out =  JSON.parse(xmlhttp.responseText);

   var html = "<table><tr><td>id</td><td>createdDate</td><td>Balance</td></tr>";
       html += "<tr><td>" + out.id + "</td><td>" + out.createddate + "</td><td>" + out.balance + "</td></tr></table>";

   var content = document.getElementById('output');
   content.innerHTML = html;

}
}

我只包含了您的 json 对象中的 3 个属性，我猜您将能够处理此示例中的其余部分。

于 2013-08-06T06:30:23.857 回答
0

你需要修改你的js代码

<script>
function showCardInfo()
{
var xmlhttp;
if (window.XMLHttpRequest)
{// code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp = new XMLHttpRequest();
}
else
{// code for IE6, IE5
xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.onreadystatechange=function()
{
if (xmlhttp.readyState==4 && xmlhttp.status==200)
{
document.getElementById("output").innerHTML=xmlhttp.responseText;
}
}
if (document.getElementById("transFlag").checked)
{
xmlhttp.open("GET","getCardInfo.php?id="+document.getElementById("cardNo").value+"&transactions=true",true);
xmlhttp.open("GET", "test.txt",true);
 xmlhttp.onreadystatechange=function() {
  if (xmlhttp.readyState==4) {
   alert(xmlhttp.responseText)
  }
 }
 xmlhttp.send(null)
}
else
{
xmlhttp.open("GET","getCardInfo.php?id="+document.getElementById("cardNo").value,true);
xmlhttp.open("GET", "test.txt",true);
 xmlhttp.onreadystatechange=function() {
  if (xmlhttp.readyState==4) {
   alert(xmlhttp.responseText)
  }
 }
 xmlhttp.send(null)
}

}
</script>
于 2013-08-06T06:34:33.467 回答