Question

现在我有一个使用AJAX读取XML文件和json文件的程序。问题是，一旦用户单击其中一个按钮，文本将永久保留在页面上。我想知道是否有办法制作一个按钮来删除文本并重新开始。我尝试制作一个重置按钮，但它没有工作。这是我的代码。感谢您的帮助。

<!DOCTYPE html>
<html>
<head>
<title>Assignment8</title>
<script src="ajax.js"></script>
<script>
    function getXML() {
        var xmlHttp = xmlHttpObjCreate();
        if (!xmlHttp) {
            alert("The browser doesn't support this action.");
            return;
        }

        xmlHttp.onload = function() {
            if (xmlHttp.status == 200) {
                // Get XML Document
                var xmlDoc = xmlHttp.responseXML;

                // Variable for our output
                var output = '';

                // Build output by parsing XML
                dinos = xmlDoc.getElementsByTagName('title');

                for (i = 0; i < dinos.length; i++) {
                    output += dinos[i].childNodes[0].nodeValue + "<br>";
                }

                // Get div object
                var divObj = document.getElementById('dinoXML');

                // Set the div's innerHTML
                divObj.innerHTML = output;
            }
        }

        xmlHttp.open("GET", "dino.xml", true);
        xmlHttp.overrideMimeType("text/xml")
        xmlHttp.send();
    }

    function getJSON() {
        var xmlHttp = xmlHttpObjCreate();
        if (!xmlHttp) {
            alert("The browser doesn't support this action.");
            return;
        }
        xmlHttp.onload = function() {
            if (xmlHttp.status == 200) {

                // Get Response Text
                var response = xmlHttp.responseText;

                // Prints the JSON string
                console.dir(response);

                // Get div object
                var divObj = document.getElementById('dinoJSON');

                // We used JSON.parse to turn the JSON string into an object
                var responseObject = JSON.parse(response);

                // This is our object
                console.dir(responseObject)

                // We can use that object like so:
                for (i in responseObject) {
                    divObj.innerHTML += "<p>" + responseObject[i].name
                            + " lived during the " + responseObject[i].pet
                            + " period.</p>";
                }
            }
        }
        xmlHttp.open("GET", "json.php", true);
        xmlHttp.send();
    }
</script>
</head>
<body>
    <form>
        <h3>Dinosaur Web Services</h3>
        <div id="home"></div>
        <button type="reset" value="Reset">Home</button>

        <div id="dinoJSON"></div>
        <button type="button" onclick="getJSON();">JSON Dinos</button>

        <div id="dinoXML"></div>
        <button type="button" onclick="getXML();">XML Dinos</button>
    </form>
</body>
</html>

Answer 1

您可以在插入新值之前清空div。就像下面我为其中一个div所做的那样，你可以对其他人做同样的事情。将其添加到您的脚本

<script>
 function reset() {
 var divObj = document.getElementById('dinoXML');
 // Set the div's innerHTML
 divObj.innerHTML = ""; // empty the div here
 divObj.innerHTML = output;
}
</script>

并在HTML中添加此按钮 RESET

Answer 2

你走了：

<!DOCTYPE html>
<html>
    <head>
        <title>Assignment8</title>
        <script src="ajax.js"></script>
        <script>

        function getXML() {
            document.getElementById('msg').style.display = "none";
            var xmlHttp = xmlHttpObjCreate();
            if (!xmlHttp) {
                alert("The browser doesn't support this action.");
                return;
            }

            xmlHttp.onload = function() {
                if (xmlHttp.status == 200) {
                    // Get XML Document
                    var xmlDoc = xmlHttp.responseXML;

                    // Variable for our output
                    var output = '';

                    // Build output by parsing XML
                    dinos = xmlDoc.getElementsByTagName('title');

                    for (i = 0; i < dinos.length; i++) {
                        output += dinos[i].childNodes[0].nodeValue + "<br>";
                    }

                    // Get div object
                    var divObj = document.getElementById('dinoXML');

                    // Set the div's innerHTML
                    divObj.innerHTML = output;
                }
            }

            xmlHttp.open("GET", "dino.xml", true);
            xmlHttp.overrideMimeType("text/xml");
            xmlHttp.send();
        }


        function getJSON() {
            document.getElementById('msg').style.display = "none";
            var xmlHttp = xmlHttpObjCreate();
            if (!xmlHttp) {
                alert("The browser doesn't support this action.");
                return;
            }

            xmlHttp.onload = function() {
                if (xmlHttp.status == 200) {

                    // Get Response Text
                    var response = xmlHttp.responseText;

                    // Prints the JSON string
                    console.dir(response);

                    // Get div object
                    var divObj = document.getElementById('dinoJSON');

                    // We used JSON.parse to turn the JSON string into an object
                    var responseObject = JSON.parse(response);

                    // This is our object
                    console.dir(responseObject)

                    // We can use that object like so:
                    for (i in responseObject) {
                        divObj.innerHTML += "<p>"+responseObject[i].name + " lived during the " + responseObject[i].pet + " period.</p>";
                    } 
                }
            }

            xmlHttp.open("GET", "json.php", true);
            xmlHttp.send();
        }

        function resetDivs(){
            document.getElementById('msg').style.display = "block";
            document.getElementById('dinoJSON').innerHTML = "";
            document.getElementById('dinoXML').innerHTML = "";
        }
        </script>
    </head>
    <body>
        <form>
            <h3> Dinosaur Web Services </h3>
            <div id="home"></div>
            <div id="msg">Select a button</div>
            <button type="reset" value="Reset" onclick="resetDivs();"> Home</button>

            <div id="dinoJSON"></div>
            <button type="button" onclick="getJSON();"> JSON Dinos</button>

            <div id="dinoXML"></div>
            <button type="button" onclick="getXML();"> XML Dinos</button>
        </form>
    </body>
</html>

创建一个删除正在显示的数据的按钮

2 个答案: