jQuery+Ajax实现用户名重名实时检测

下面是“jQuery+Ajax实现用户名重名实时检测”的完整攻略：

1. 确认需求

在包含注册功能的网站中，为了避免用户注册时输入了已经存在的用户名，通常需要使用实时检测技术，及时判断当前输入的用户名是否在数据库中已经存在。基于此需求，我们需要使用jQuery和Ajax来实现这个功能。

2. 编写HTML部分

首先，在HTML中需要创建一个表单，包含输入框和提示消息的元素：

<form>
  <label for="username">用户名</label>
  <input type="text" id="username" name="username">
  <span id="username-tip"></span>
</form>

3. 编写jQuery代码

接下来需要编写jQuery代码，来实现实时检测功能。在jQuery中，使用 $.ajax 方法来向后台发起请求，并获取返回值。同时，通过 $.trim 方法来删除字符串两端的空格，以避免不必要的错误。

以下代码示例为实现当用户输入用户名后，实时检测该用户名是否已存在于数据库中，并给出相应的提示消息。

$('#username').blur(function() {
  var username = $.trim($(this).val());
  if (username === '') return;

  $.ajax({
    url: 'check_username.php',
    data: {username: username},
    dataType: 'json',
    type: 'POST',
    success: function(res) {
      if (res.code === 1) {
        $('#username-tip').text('该用户名已存在');
      } else {
        $('#username-tip').text('该用户名可以使用');
      }
    }
  });
});

4. 编写后端代码

最后需要编写后端代码，对接收到的用户名进行处理，判断其是否存在于数据库中。在后端代码中，可以使用PDO来连接到数据库，并使用 rowCount 函数获取符合条件的行数，以判断该用户名是否已经存在于数据库中。

以下示例代码为后端实现部分：

// 连接数据库
$dsn = 'mysql:host=localhost;dbname=user';
$username = 'root';
$password = '';
$dbh = new PDO($dsn, $username, $password);

// 获取用户名并查询
$username = $_POST['username'];
$sql = 'SELECT * FROM user WHERE username = ?';
$stmt = $dbh->prepare($sql);
$stmt->bindValue(1, $username);
$stmt->execute();

// 返回结果
if ($stmt->rowCount() > 0) {
  $res = array('code' => 1, 'msg' => '用户名已存在');
} else {
  $res = array('code' => 0, 'msg' => '用户名可使用');
}
echo json_encode($res);

5. 示例

下面给出一个使用jQuery+Ajax实现用户名重名实时检测的示例：

在前端页面中，输入框名为username，提示文字的元素名为username-tip。

以下为检测的后台代码，执行流程为：

• 接收到前端传来的用户名；
• 查询数据库，统计用户名出现的次数，并返回结果。

<?php
header("Content-Type: application/json; charset=utf-8");

$username = $_POST['username'];
$con = mysqli_connect('localhost', 'root', '', 'demo');
if (!$con) {
    die("连接失败：" . mysqli_connect_error());
}

$qry = "select count(*) as c from users where username = ?";
$stmt = mysqli_prepare($con, $qry);
mysqli_stmt_bind_param($stmt, "s", $username);
mysqli_stmt_execute($stmt);
$result = mysqli_stmt_get_result($stmt);
$row = mysqli_fetch_array($result, MYSQLI_ASSOC);

if($row['c'] > 0) {
    $data = array("ret" => 1, "msg" => "用户名已存在");
} else {
    $data = array("ret" => 0, "msg" => "用户名可以使用");
}

echo json_encode($data);
mysqli_close($con);
?>

在jQuery中使用ajax并将后端返回值添加至对应元素内：

$("#username").change(function() {
    var username = $(this).val();
    $.ajax({
        method: "POST",
        url: "check_username.php",
        data: { username: username }
    })
    .done(function(data) {
        console.log(data);
        if (data.ret == 0) {
            $('#username-tip').text(data.msg).css('color', 'green');
        } else {
            $('#username-tip').text(data.msg).css('color', 'red');
        }
    })
    .fail(function(msg) {
        console.error(msg);
    });
});

这样，用户输入用户名时，jQuery会检测该用户名是否已经存在；如果存在，则改变该页面提示消息的颜色为红色、内容为“用户名已存在”；如果不存在，则改变该页面提示消息的颜色为绿色、内容为“用户名可以使用”。