javascript - 使用 AJAX 调用表

问题描述

你的任务是创建一个网页，并在网页上显示一个带有指令“输入比特币块哈希：”的文本字段。

在网页上，显示一个按钮“获取比特币区块信息”。

每当用户输入比特币块哈希并单击按钮时，进行适当的 AJAX 调用以检索比特币块 JSON。在网站上，动态创建一个表格来显示比特币区块信息：

该表有 6 行和 2 列

第一行显示哈希信息

第二行显示尺寸信息

第三行显示高度信息

第 4 行显示版本信息

第 5 行显示 Merkle 根信息

第 6 行显示 tx 信息

税务信息必须显示在无序列表中。如果用户输入了无效的比特币块哈希，则网页应以红色显示错误消息“无效的比特币块哈希”。

请注意：您必须使用我们讲座中的方法来进行 AJAX 调用。其他 ajax 库是不允许的，你不会得到它的标记。

<!DOCTYPE html>
<html>
    <head>
        <title>Exercise 3</title>
   
    <script type="text/javascript">

        function newAjaxQuery(){
            
            var xmlhttp = new XMLHttpRequest();

            xmlhttp.onreadystatechange = function(){
                readyStateChangeHandler(xmlhttp);
            }

            var hashInput = document.getElementById("bitcoin");
            var hash = hashInput.value;
            var query1 = "https://explorer.api.bitcoin.com/bch/v1/block/00000000000000000272f89a3e1883efc2ab81a6167ce66030f11b980d6db501";
            xmlhttp.open("GET", query1, true);
            xmlhttp.send();

        }

        function readyStateChangeHandler(xmlhttp) {
            if(xmlhttp.readyState == XMLHttpRequest.DONE){
                if(xmlhttp.status == 200){
                    handleStatusSuccess(xmlhttp);
                } else {
                    handleStatusFailure(xmlhttp);
                }
            }
        }

        function handleStatusSuccess(xmlhttp){
            
            var jsonText = xmlhttp.responseText;
            var obj = JSON.parse(jsonText);
            display(obj);
            }


        function handleStatusFailure(xmlhttp){
            
            alert("AJAX request has failed");
            alert("readyState = " + xmlhttp.readyState);
            alert("status = " + xmlhttp.status);

            var displayDiv = document.getElementById("display");
            var html ="";

            html += "<span style='color:red> Invalid bitcoin block hash </span>'"

            displayDiv.innerHTML = html;
            }


        function display(){

            var displayDiv = document.getElementById("display");
            displayDiv.innerHTML = html;

            var html ="";

            html += "<table border = '1 '>";
            html += "<tr><th>Hash information</th><td>" + jsonObject.hash + "</td></tr>";
            html += "<tr><th>Size</th><td>" +jsonObject.size + "</td></tr>";
            html += "<tr><th>Height</th><td>" +jsonObject.height + "</td></tr>";
            html += "<tr><th>Version</th><td>" +jsonObject.ver + "</td></tr>";
            html += "<tr><th>merkleroot</th><td>" +jsonObject.mrk1_root + "</td></tr>";
            html += "<tr><th>tx</th><td><ul>";
                for (var i =0; i < jsonObject.tx.length; i++){
                    var successfultx = jsonObject.tx[i];
                html += "<li>" + successfultx.hash + "</li>";
            }

            html += "</ul></td>";
            html += "</table>";
        }
            
    </script>
    </head>
    <body>
        <form>
            <label for="bitcoin">Enter a bitcoin block hash: </label><br>
            <input type="text" id="bitcoin" name="bitcoin"><br>

            <button type="button" onClick="newAjaxQuery()">Get Bitcoin Block Information</button>

        </form>
    </body>
</html>

标签： javascripthtmljsonajax

javascript - 使用 AJAX 调用表

问题描述

解决方案

推荐阅读