2

这是让 ajax 检查用户存在的表单。

<!DOCTYPE html>

<html>
    <head><title>Register new user!</title>
    <script src="jquery-1.7.1.min.js"></script>
    </head>
    <body>
        Username:
        <input type="text" name="username" id="username"/><span id="user"></span><br/>
        Password:
        <input type="password" name="password" id="password"/><br/>
        <input type="button" value="Register" name="submit" id="submit" onclick="register_user();"/>
    </body>
    <script>
        function register_user()
        {
            $.ajax(
                {
                    type:"POST",
                    data:username,
                    url:"userexists.php"                    
                })
            .fail(function()
                  {
                    $('#user').html("This user already exists");
                  }
            );                
        }
    </script>
</html>

这是 userexists.php 模块

<?php
    // connection to the db
    define(IPHOST,"localhost");
    define(DBPASSWORD,"");
    define(DBUSER,"root");
    define(DATABASE,"ajaxtest");
    define(TABLENAME,"at");

    $conn=mysql_connect(IPHOST,DBUSER,DBPASSWORD) or die(mysql_error());
    mysql_select_db(DATABASE) or die(mysql_error());
    $username=$_POST('username');
    $sql="SELECT username FROM ".TABLENAME." WHERE username=".$username;
    $query=mysql_query($sql);
    if(0!=mysql_numrows($query))
    {
        //
    }
    else
    {

    }
?>

但是我一直想弄清楚ajax函数的实际工作原理，例如，在我知道输入的用户名已被使用后，我应该在空白字段中输入什么？我根本不懂ajax。

[更新] 谢谢，我现在明白了，我有几个答案，不知道选择哪一个作为最好的回复。没有选择全部的选项。

4

4 回答 4

3

您的代码中有很多错误，请尝试以下代码：

<!DOCTYPE html>

<html>
    <head><title>Register new user!</title>
    <script src="jquery-1.7.1.min.js"></script>
    </head>
    <body>
        Username:
        <input type="text" name="username" id="username"/><span id="user"></span><br/>
        Password:
        <input type="password" name="password" id="password"/><br/>
        <input type="button" value="Register" name="submit" id="submit" onclick="register_user();"/>
    </body>
    <script>
        function register_user()
        {
            $.ajax({
                type: "POST",
                data: {
                    username: $('#username').val(),
                },
                url: "userexists.php",
                success: function(data)
                {
                    if(data === 'USER_EXISTS')
                    {
                        $('#user')
                            .css('color', 'red')
                            .html("This user already exists!");
                    }
                    else if(data === 'USER_AVAILABLE')
                    {
                        $('#user')
                            .css('color', 'green')
                            .html("User available.");
                    }
                }
            })              
        }
    </script>
</html>

对于您的 php 代码：

<?php
    // connection to the db
    define(IPHOST,"localhost");
    define(DBPASSWORD,"");
    define(DBUSER,"root");
    define(DATABASE,"ajaxtest");
    define(TABLENAME,"at");

    $conn=mysql_connect(IPHOST,DBUSER,DBPASSWORD) or die(mysql_error());
    mysql_select_db(DATABASE) or die(mysql_error());

    $username = mysql_real_escape_string($_POST['username']); // $_POST is an array (not a function)
    // mysql_real_escape_string is to prevent sql injection

    $sql = "SELECT username FROM ".TABLENAME." WHERE username='".$username."'"; // Username must enclosed in two quotations

    $query = mysql_query($sql);

    if(mysql_num_rows($query) == 0)
    {
        echo('USER_AVAILABLE');
    }
    else
    {
        echo('USER_EXISTS');
    }
?>
于 2012-04-28T10:06:02.027 回答
3

由于您是 AJAX 的新手，让我试着在我们进行的过程中通过一些解释帮助您更好一点。

AJAX 代表异步 Javascript 和 XML。使用它，您可以向另一个页面发出请求，并根据另一个页面返回的结果让您的原始页面表现不同。

那么这有什么用呢？好; 您甚至可以在“用户名”字段上设置 onblur 以检查远程脚本以查看用户名是否已在使用中。（您在当前设置中已经在执行此操作。干得好！）

首先; .fail() 告诉您当前页面“如果 ajax 请求失败，让我们执行此代码”。这称为回调。回调是 javascript 代码在异步请求完成时执行的函数。

所以你真正想要做的是使用 .done() 方法。这告诉您的 jQuery 请求“嘿，当您完成此请求后，请执行这段代码。当您这样做时，我将坐在这里处理发生的任何其他事情”。

因此，您可以看到使用 .done() 和 .fail() 之间存在细微差别，但是我可以看到您很容易将 .fail() 与 ajax 新手混淆。

因此，让我们回到您当前的问题。让我们将 ajax 修改为更像这样的东西：

$("#submit").click(function()
{
    $.ajax({
      type: "POST",
      data: "username="+$("#username").val(),
      url: "userexists.php"                    
    })
    .done(function(response){
        $('#user').html(response);
    });
});

这样做是为您的提交按钮绑定一个 onclick 处理程序，其 id 为“提交”。所以现在你可以删除 onclick="register_user"。其次，它说，“嘿，网页，去向 userexists.php 发送带有参数名称 username 的用户名文本框值。完成该请求后，将 #user 的 html 设置为响应。

所以它会去做。

现在你的 PHP 文件，你可以这样做：

<?php
    // connection to the db
    define(IPHOST,"localhost");
    define(DBPASSWORD,"");
    define(DBUSER,"root");
    define(DATABASE,"ajaxtest");
    define(TABLENAME,"at");

    $conn = mysql_connect(IPHOST,DBUSER,DBPASSWORD) or die(mysql_error());
    mysql_select_db(DATABASE) or die(mysql_error());

    $username = mysql_real_escape_string($_POST['username']); // Stop some MySQL injections

    $sql="SELECT username FROM ".TABLENAME." WHERE username='$username'";
    $query=mysql_query($sql);
    if(mysql_numrows($query) == 0)
    {
        echo 'Username is available!'
    }
    else
    {
        echo 'Sorry, username is in use.';
    }
?>

因此，一旦您的脚本进行查询，如果找到结果，它将在 HTML div 中显示“用户名可用！”。否则，如果找到匹配项，则会显示“对不起，用户名不可用”。

希望这可以帮助您更好地理解 ajax！

于 2012-04-28T10:10:07.463 回答
0

这在技术上取决于你。（例如）您可以为“用户存在”返回“1”，为“用户不存在”返回“0”，或者返回更详细的 XML。客户端应用程序 (Javascript) 将读取返回的结果并向用户打印出适当的消息。

如果您的功能实际失败（服务器端错误等），则应使用 .fail 方法。所以它似乎不适合你想要做的事情。我会在您的“.done()”代码中放入上述返回值的测试并打印出正确的消息。

Javascript：

.done(function ( data ) {
  if(data == "0")
    alert("Your username is OK");
  else
    alert("Your username is already used");
});

PHP：

if(0!=mysql_numrows($query))
{
    echo "0";
}
else
{
    echo "1";
}
于 2012-04-28T10:04:52.523 回答
0

当服务器返回意外数据时，使用 ajax 中的函数 .fail。但是您的 php 代码不返回任何内容。使用这样的东西：

function register_user()
    {
        $.ajax(
            {
                type:"POST",
                data:username,
                url:"userexists.php"                    
            })
        .done(function(_return)
              {
                if(_return)                                                                                                                                                               
                {
                   if(_return['status']=='yes')
                   {
                     $('#user').html(_return['msg']);
                   }
                 }
              })
        .fail(function());                
    }

在 php 中：

if(0!=mysql_numrows($query))
{
      $return = array('status'=>'yes',
                      'msg'=>"User alredy exist");

      echo json_encode($return);
      return true;
}

现在您可以添加更多具有许多状态的条件并在 javascript 中对其进行解析。

于 2012-04-28T10:05:09.917 回答