如何在不刷新页面的情况下显示错误？

Question

我正在创建注册表。 用户输入用户名和密码，然后按Submit，然后使用POST提交表单。 HTML：

<link href="Styles/RegisterStyles.css" rel="stylesheet" type="text/css" />
<form id="frmRegister" method="post" action="register.php">
  <h1>Register</h1>
    <table width="100%">
      <tr>
        <td width="16%"><label class="alignRight"> Username: </label></td>
        <td width="84%"><input name="txtUsername" type="text" maxlength="40" /></td>
      </tr>

      <tr>
        <td width="16%"><label class="alignRight"> Password: </label></td>
        <td width="84%"><input name="txtPassword" type="text" maxlength="40" /></td>
      </tr>

      <tr>
        <td width="16%">&nbsp;</td>
        <td width="84%"><input name="Submit" class="submitButton" type="submit" /></td>        
      </tr>

    </table>
</form>
</html>

PHP：

$username = $_POST["txtUsername"];
$password = $_POST["txtPassword"];
//Code to connect to database

function doesUsernameExist($username)
{
    //return true if username exists or false otherwise
}

现在，在PHP中，我运行查询以检查用户名是否存在于数据库中。 如果用户名已经存在，如何在不导航到另一个页面并使“用户名”和“密码”字段重置为空白的情况下通知用户？

有些注册表格中的JavaScript非常简洁，每当您按下键盘上的一个键时，就会检查用户名是否存在。 关于如何实施的任何想法？ 从我所能收集到的内容中，很难（也是不好的做法）使用JavaScript连接到数据库。

Answer 1

我使用jQuery做这样的事情。

在html中

<input type="text" name="username" onBlur="checkUsername(this)">

在JavaScript这样的东西

function checkUsername(v){
    $.post("phppage.php",{
        valToBeChecked:v
    },function(d){
        if($.trim(d)==true){
            // php page returned true
        }else{
            // php page returned false
        }
    });
}

请注意，这只是一个例子，我认为语法正确。

Answer 2

我对此的解决方案是利用AJAX。

提交表单后，对页面进行AJAX调用，该页面将评估已输入到表单中的数据，并返回有关其是否经过验证的信息。

从该AJAX调用中获取一些信息之后，确定是否再次提交表单，但这一次是将页面提交到将数据吸收到数据库中的页面。

这是一种解决方案； 作为AJAX新手，我想可能会有更好的选择，但它可能对您有用。

Answer 3

这将对没有jQuery的输入模糊进行AJAX检查。

编辑：我想澄清一下，我不建议使用这种方法，并且更喜欢将jQuery（或其他类似的JS框架）用于AJAX。 但是，我知道并不是每个人都可以指定自己使用的技术，因此，这就是您的要求的答案！ :)

<input id="txtUsername" name="txtUsername" />
<script type="text/javascript">
    window.onload = function() {
        document.getElementById('txtUsername').onblur = function(e) {
            // Get the username entered
            var el = e.target;
            var username = el.value;

            // Create an XHR
            var xhr = null;
            if (window.XMLHttpRequest) {
                xhr = new XMLHttpRequest();
            } else {
                xhr = new ActiveXObject("Microsoft.XMLHTTP");
            }

            // AJAX call to the server
            request.open('GET', '/check_username.php?username=' + username, false);
            xhr.onload = function(e) {
                var json = eval(xhr.responseText);
                if (json.exists) {
                   window.alert('That username exists already.');
                }
            }
            xhr.send();
        }
    }
</script>

user_exists.php

$username = isset($_GET['username']) ? $_GET['username'] : '';
$username = mysqli_real_escape_string($username);

$sql = "SELECT COUNT(*) > 0 AS user_found
        FROM users
        WHERE username = '{$username}'";

$result = mysqli_query($sql);

$exists = false;
if ($row = mysqli_fetch_assoc($result)) {
    $exists = $row['user_found'] ? true : false;
}

echo json_encode(array('exists' => $exists));

Answer 4

一个不错的选择是使用jQuery / AJAX。 查看这些示例 ，然后在您的服务器上进行尝试。 在此示例中，在FILE1.php中，请注意它正在传递空白值。 您不想传递一个空白值，这是您将用户名和密码传递到FILE2.php的地方。 在您的情况下，该行如下所示：

data: 'username='+username+'&password='+password,

在FILE2.php示例中，您将像这样检索这些值：

$uname = $_POST['username'];
$pword = $_POST['password'];

然后执行您的MySQL查找并按以下方式返回值：

echo 1;

这将为FILE1.php中的成功函数提供1 ，并将其存储在名为“ data”的变量中。 因此， alert(data); 成功功能中的第一行将警告第一位。

这是另一个值得回顾的好例子 。

方法是创建表单，然后使用jQuery来检测按钮的按下并将数据通过AJAX提交到辅助PHP文件。 以上示例显示了如何执行此操作。

辅助PHP文件返回一个响应（无论您选择发送什么），该响应出现在AJAX调用的“成功：”部分中。

jQuery / AJAX是javascript，因此您有两个选择：可以将其放在主PHP文档的<script type="text/javascript"></script>标记内，也可以<?php include "my_javascript_stuff.js"; ?> <?php include "my_javascript_stuff.js"; ?>在PHP文档底部。