Question

我正在尝试使用Ajax（Javascript + php）来检查当用户将焦点更改为表单的另一个字段时是否可以使用用户名。我的函数仅在我有一些alert（）时起作用，如果我删除它们，函数就会停止工作。

另一个奇怪的事情是alert(requestObject.readyState);只显示状态1.据我所知，它应该显示所有状态，或者至少显示状态4.

这是我的javascript代码，它位于HTML页面的标题中。

    var requestObject = false;
    function funcReceiveData()
    {
        alert(requestObject.readyState);
        if(requestObject.readyState == 4)
        {
            if(requestObject.status == 200)
            {
                var status = requestObject.responseText;
                if(status == "ok")
                {
                    document.getElementById('userValid').innerHTML = 'Valid user';
                }
                else
                {
                    document.getElementById('userValid').innerHTML = 'Choose another username';
                }
            }
        }
    }

if (window.XMLHttpRequest)
{
    requestObject = new XMLHttpRequest();
}
else if(window.ActiveXObject)
{
    requestObject = new ActiveXObject("Microsoft.XMLHTTP");
}

function checkUser()
{
    if(requestObject){
        requestObject.open("POST", "addUser.php", true);
        requestObject.setRequestHeader("Content-type","application/x-www-form-urlencoded");
        var user = document.getElementById('username').value;
        var tobesent = "username=" + user;
        requestObject.send(tobesent);
        requestObject.onreadystatechange = funcReceiveData();
        alert(tobesent);
    }
}

这是我的HTML代码的正文部分：

<BODY>
<form method="POST" action="addUser.php">
    <table>

        <tr>
            <td><strong>Username:</strong></td>
            <td><input type="text" name="username" size="25" onblur="checkUser();" id="username"></td>
            <td><i id='userValid'>bla</i>
        </tr>

        <tr valign="top">
            <td><strong>Password:</strong></td>
            <td><input type="password" name="password" size="25"></td>
        </tr>

        <tr valign="top">
            <td><strong>Frist name:</strong></td>
            <td><input type="text" name="Fname" size="25"></td>
        </tr>

        <tr valign="top">
            <td><strong>Last name:</strong></td>
            <td><input type="text" name="Lname" size="25"></td>
        </tr>

        <tr valign="top">
            <td><strong>Address line 1:</strong></td>
            <td><input type="text" name="address1" size="50"></td>
        </tr>

        <tr valign="top">
            <td><strong>Address line 2:</strong></td>
            <td><input type="text" name="address2" size="50"></td>
        </tr>

        <tr valign="top">
            <td><strong>City:</strong></td>
            <td><input type="text" name="city" size="25"></td>
        </tr>

        <tr valign="top">
            <td><strong>Postcode:</strong></td>
            <td><input type="text" name="postcode" size="25"></td>
        </tr>

        <tr valign="top">
            <td><strong>Phone:</strong></td>
            <td><input type="text" name="phone" size="25"></td>
        </tr>

        <tr valign="top">
            <td><strong>Mobile:</strong></td>
            <td><input type="text" name="mobile" size="25"></td>
        </tr>

        <tr valign="top">
            <td><strong>Email:</strong></td>
            <td><input type="text" name="email" size="25"></td>
        </tr>
        <tr>
            <td><input type="submit" value="Submit" /></td>
            <td><input type="reset" value="Clear" /></td>
        </tr>
    </table>
</form>

我的PHP代码如下，这是一个非常愚蠢的代码，只是为了测试。我将检查数据库中的用户名。

<?php 
$user = $_POST['username'];
if($user == "Tiago")
    echo("ok");
else
    echo("Error");
?>

我在此地址中托管了该页面：https://devweb2012.cis.strath.ac.uk/~ntb13105/WAD/tests/Twig/FINAL/addUser.html

有没有人知道发生了什么？

Answer 1

您正在调用 funcReceiveData，而不是将其用作readyStateChange事件处理程序。

它不起作用，因为此时HTTP请求没有响应。在其中粘贴警报会延迟尝试读取requestObject.readyState的值，直到您单击“确定”，这足以让响应到达。

删除()并在发送请求之前分配事件处理程序。

requestObject.onreadystatechange = funcReceiveData;
requestObject.send(tobesent);

Javascript函数只能使用其中的一些“alert（）”

1 个答案: