javascript - 当我添加另一个函数时,网页 Javascript 停止工作

标签 javascript html ajax

我正在为一项作业编写一个简单的网页,该网页要求我创建一个表单,如果输入的 ID 号在外部 XML 文档中匹配,该表单会自动填充。一切正常,直到我开始添加另一个函数以在提交时执行,该函数将添加或修改记录(通过 AJAX 调用)。

但是,添加这个新功能后,另一个就停止工作了。如果我把它注释掉,原来的功能会再次起作用。

我找不到这个新功能的任何问题(即所有括号都在正确的位置等)。为什么它毁了一切?

这是我的代码:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
    <head> 
        <script type="text/javaScript">
            function checkID(val){
                if (val.value.length != 6) //Since student ID's are six digits
                    return;
                //inID = val.value;
                //if (inID.length < 6) return;

                xhr = new XMLHttpRequest();
                xhr.open('GET', 'processor.php?studentID=' + document.forms[0].elements[0].value);
                xhr.onreadystatechange = function() {
                    /**
                    if (xhr.readystate != 4 || xhr.status != 200){
                        document.getElementById("status").innerHTML = "<p> Not Done Yet</p>";
                    }
                    **/
                    if (xhr.readyState === 4 && xhr.status === 200){
                        document.getElementById("status").innerHTML = "";
                        parse(xhr.responseXML); 
                    }
                }
                xhr.send();
                document.getElementById("status").innerHTML = "<p> Not Done Yet</p>";
            }
            function parse(xml){
                if (xml == null) alert("Null!");
                var student = xml.getElementsByTagName('student');
                    if (student.length == 0) alert("No Student's Found with that ID");
                var content = student.item('0');
                    var name = content.getElementsByTagName('fullname');
                    name = name.item(0).childNodes[0].nodeValue;
                    document.forms[0].elements[1].value = name;

                    var phone = content.getElementsByTagName('phone');
                    phone = phone.item(0).childNodes[0].nodeValue;
                    document.forms[0].elements[2].value = phone;

                    var email = content.getElementsByTagName('email');
                    email = email.item(0).childNodes[0].nodeValue;
                    document.forms[0].elements[3].value = email;

            }
            function addOrModify(curr){
                xhr = new XHRHttpRequest();
                xhr.open('GET', 'addOrModify.php?studentID=' + document.forms[0].elements[0].value);
                xhr.onreadystatechange = function(){
                    if (xhr.readyState == 4 && xhr.status == 200){
                        if (xhr.responseText == "added")
                            document.getElementByID('status').innerHTML = "Added";
                }
                xhr.send();
            }

        </script>
        <style type="text/css">
            #container {
                margin: 0 auto;
                padding: 30px;
                text-align: center;
            }
            .centerp {
                font-size: 150%;
                text-align: center;
            }
            table {
                align: center;
            }
        </style>
        <title>Student Profile</title>
    </head>

    <body>
        <p class="centerp"> Student Profiles </p>
        <div id="container">
            <form method="GET" action="">
                <table align="center">
                    <label>
                        <tr>
                            <td>Student ID</td> 
                            <td><input type="text" name="studentID" onblur="checkID(this)"> </input></label></td>
                        </tr>
                    </label>
                    <label>
                        <tr>
                            <td>Name</td> 
                            <td><input type="text" name="name" id="name"> </input></label></td>
                        </tr>
                    </label>
                    <label>
                        <tr>
                            <td>Phone</td> 
                            <td><input type="text" name="phone"> </input></label></td>
                        </tr>
                    </label>
                    <label>
                        <tr>
                            <td>Email</td> 
                            <td><input type="text" name="email"> </input></label></td>
                        </tr>
                    </label>
                        <tr>
                            <td> <input type="submit" onclick="addOrModify()"> </input></td></tr> </td>
                        </tr>
                        <tr>
                            <td> <div id="status">
                                </div> </td>
                        </tr>
                </table>
            </form>
        </div>
    </body>
</html>

最佳答案

你说所有的括号都在正确的位置,但它们不是。

你没有关闭

if (xhr.readyState == 4 && xhr.status == 200){

在你的最后一个函数中

关于javascript - 当我添加另一个函数时,网页 Javascript 停止工作,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/16019837/

相关文章:

javascript - 在 JavaScript 中,是否可以仅使用 .filter() 来删除重复项(第一个实例是保留的实例)?

html - 下拉 CSS 和 HTML 导航菜单在 IE6 - IE8 中不起作用

javascript - Angular JS 方法 GET 在 CONFIG 之后进入 RUN

javascript - 在没有可用 Web 服务器的情况下将 XML 本地加载到 JavaScript 中?

javascript - 在jstree中选择父级时如何获取子级的路径

javascript - React Native 版本不匹配。无法在Android Studio中生成构建,但通过VS代码react-native run-android可以正常运行

javascript - 如何在 Angular 指令中使用 jquery

HTML/CSS - 不会消失的神秘顶部填充

使用 javascript/AJAX 的 PHP Cronjobs

php - 不发送隐藏复选框输入值 :(