获取一个PHP文件以将文本/纯文本返回给AJAX调用

Question

我正在使用一个简单的HTML表单，该表单要么检测记录是否存在（在XML文件中），然后填充所有字段，要么检测该记录不存在，并在提交时创建记录（或修改当前记录）。它已被修改）

我现在正在处理将添加不存在的记录和/或修改现有记录的部分。

AJAX调用一个PHP文件，在PHP文件中，我想检查记录是否存在，并相应地执行适当的操作。 我希望通知表单用户（无双关语）进行了什么操作（即“添加记录”或“修改记录”）。

首先，我现在要做的所有PHP工作就是返回added的文本。 我想看看是否可以获取“添加的记录”以正确显示在原始HTML文件中。

预期：当我单击Submit ，我希望消息“添加记录”或“修改记录”出现在表单下，具体取决于PHP文件的返回值。

错误：现在，当我单击Submit ，表单将自行重置，将所有参数添加到URL，但我没有从AJAX请求中收到任何消息。

这是我的代码：

HTML页面：

<!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){
                xhr2 = new XHRHttpRequest();
                xhr2.open('GET', 'addOrModify.php'); //?studentID=' + document.forms[0].elements[0].value);
                xhr2.onreadystatechange = function(){
                    if (xhr2.readyState === 4 && xhr2.status === 200){
                        if (xhr.responseText == "added") {document.getElementById("status").innerHTML = "<p>Added the Record</p>"};
                    }
                }
                xhr.send();
                return false;
            }

        </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>
                <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="return addOrModify()"> </input></td></tr> </td>
                        </tr>
                        <tr>
                            <td> <div id="status">
                                </div> </td>
                        </tr>
                </table>
            </form>
        </div>
    </body>
</html>

简单的PHP页面：

<?php


aOm();
function aOm(){
    header("Content-type: text/plain; charset=utf-8");
    echo "added";
}

?>

Answer 1

代码中的小错别字

function addOrModify(curr){
                xhr2 = new XMLHttpRequest(); // xhr2 = new XHRHttpRequest();
                xhr2.open('GET', 'addOrModify.php'); //?studentID=' + document.forms[0].elements[0].value);
                xhr2.onreadystatechange = function(){
                    if (xhr2.readyState === 4 && xhr2.status === 200){
                        if (xhr2.responseText == "added") // if (xhr.responseText == "added")
                          {document.getElementById("status").innerHTML = "<p>Added the Record</p>"};
                        }

                }
                xhr2.send(); //xhr.send();
                return false;
            }

那应该使它工作。 虽然您的php代码中没有错误

获取一个PHP文件以将文本/纯文本返回给AJAX调用

问题描述

1 个解决方案

解决方案1
1 已采纳 2013-04-15 18:29:29

获取一个PHP文件以将文本/纯文本返回给AJAX调用

问题描述

1 个解决方案

解决方案1 1 已采纳 2013-04-15 18:29:29

解决方案1
1 已采纳 2013-04-15 18:29:29