使用 AJAX 进行用户名可用性检查答案

【问题标题】：Username availability check using AJAX使用 AJAX 进行用户名可用性检查
【发布时间】：2015-09-22 20:20:38
【问题描述】：

我目前正在尝试用 PHP 开发一个小型网站来测试我的技能。然而，当我决定为注册过程实施实时用户名可用性检查时，我发现自己陷入了困境，因为我的 JavaScript 知识有些基础。

现在，当我在用户名字段中输入一些名称时，我只得到加载图像而没有别的。这就是我所做的：

我的 login.php 页面存储在 /views 文件夹中：

<section>
    <div>
        <form action="?action=login" method="post">
            <input type="text" placeholder="username" name="username" id="username" onkeypress ="check()">
            <span id="usernameStatus"></span>
        </form>
    </div>
</section>

我的js文件存放在/views/js中：

function check () {
    var status = document.getElementById('usernameStatus');
    var u = document.getElementById('username').value;
    if(u != ""){
        status.innerHTML = '<img src="views/img/wait.gif" alt="" height="20" />';
        var hr = new XMLHttpRequest();
        hr.open("POST", "../login.php", true);
        hr.setRequestHeader("Content-type", "application/x-www-form-urlencoded");

        hr.onreadystatechange = function() {
            if(hr.readyState == 4 && hr.status == 200) {
                status.innerHTML = hr.responseText;
            }
        }

        var v = "checkName="+u;
        hr.send(v);

    }
}

最后是 loginController.php 存储在 /controllers 中：

    public function run() {
        if(!empty($_POST["checkName"])){
            $name= htmlentities($_POST["checkName"]);
            if(Db::getInstance()->username_ok($name)){
                echo ("<strong>" . $name . "</strong> unavailable");
            }
            else{
                echo ("<strong>" . $name . "</strong> available");
            }
        }
        require_once('views/login.php');
    }

谁能解释我做错了什么？谢谢！

【问题讨论】：

是什么触发了您的 JavaScript？您是否在输入字段上注册了事件侦听器？
您是否在浏览器的网络查看器中检查了 AJAX 操作？查看请求参数、响应代码和响应文本以帮助您进行调试。
您好，感谢您的回复。在调试中我有"Failed to load resource: the server responded with a status of 404 (Not Found)" and "Failed to load resource: net::ERR_CACHE_MISS".我认为问题是js文件没有连接loginController.php，但我不知道如何修复它。
通过更改控制器/loginController.php 的路径修复了 404 错误

标签： javascript php model-view-controller

【解决方案1】：

这里有一个tutorial 可以帮助您，它是一个使用 PHP 和 jquery 的实时用户名检查器。

【讨论】：

谢谢。我会检查一下并尝试使其适应我的代码。

【解决方案2】：

我认为问题出在文件名上。

从你的问题，我猜文件结构是

root
|-- controllers
|   `-- loginController.php
`-- views
    `-- js
        `-- script.js

在 views/js/scriptname.js 文件中的 JavaScript 代码中，

hr.open("POST", "../login.php", true);

请求被发送到文件login.php。

但是，正如您所提到的，服务器端 php 脚本的路径是 /controllers/loginController.php。

据我所知，JavaScript 代码应该如下：

hr.open("POST", "controllers/loginController.php", true);

【讨论】：

你对我的那个错误是对的，但是由于某种原因，当我使用我的浏览器调试器时，它会显示POST http://localhost/controllers/LoginController.php 404 (Not Found)。
通过更改控制器/loginController.php 的路径来修复 404 错误。