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

时间:2012-12-05 18:53:36

标签: php javascript html sql

我正在创建一个注册表单。 用户输入用户名和密码,然后按提交,表单将使用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来连接数据库很困难(也是不好的做法)。

4 个答案:

答案 0 :(得分:3)

我使用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
        }
    });
}

注意这只是一个例子,我想我的语法是正确的。

答案 1 :(得分:1)

我的解决方案是使用AJAX。

在提交表单时,对页面进行AJAX调用,该页面将评估已输入表单的数据,并返回有关是否已验证的信息。

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

这是一个解决方案;作为一个AJAX新手我会说可能会有更好的,但它可能适合你。

答案 2 :(得分:1)

这将在没有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));

答案 3 :(得分:0)

一个很好的选择是使用jQuery / AJAX。 Look at these examples并在您的服务器上试用它们。在此示例中,在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);行将提醒第一个。

Here is another good example要审核。

方法是创建表单,然后使用jQuery检测按钮按下并通过AJAX将数据提交到辅助PHP文件。上面的例子说明了如何做到这一点。

辅助PHP文件返回一个响应(无论你选择发送什么),它都出现在你的AJAX调用的Success:部分。

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