javascript - 使用ajax检查文本输入字段的值

Question

我有一个网站，其中的登录名是屏幕名称。在创建用户表单上，我希望能够使用 ajax 检查在表单中输入的屏幕名称是否已经存在。

这是 HTML 表单输入框

<label for="screenName">Screen Name:
<input type="text" class="form-control" name="screenName" id="screenName" size="28" required>
<div class="screenNameError"></div>

应在 <div class="screenNameError"></div> 中显示一条消息如果用户名与数据库匹配，则行。

这是我的 Jquery 代码。

$(document).ready(function(){

if ($('#screenName').length > 0){

    var screenName = $("input").keyup(function(){
        var value = $(this).val();
        return value;
    })

    $.ajax({
        type: 'post',
        url:  'screenNameCheck.php',
        data: 'Screen_Name=' + screenName,

        success: function (r) {
            $('.screenNameError').html(r);
        }
    })

}

});

这是被调用以进行数据库查询的 PHP 文件

$screenName = $_POST['Screen_Name'];

$screenNameSQL = "SELECT Screen_Name FROM Users WHERE Screen_Name = '$screenName'";
$result = $my_dbhandle->query($screenNameSQL); //Query database
$numResults = $result->num_rows; //Count number of results

$resultCount = intval($numResults);

if($resultCount > 0){
    echo "The username entered already exists. Please a different user name.";
}

由于某些原因，当我以以下形式输入用户名时，我的 Jquery 没有触发:/

提前致谢

Answer 1

尝试将您的 jQuery 更改为此 -

$(document).ready(function() {
  $('#screenName').keyup(function() {
    var value = $(this).val();
    $.ajax({
      type: 'post',
      url: 'screenNameCheck.php',
      data: 'Screen_Name=' + value,
      success: function(r) {
        $('.screenNameError').html(r);
      }
    });
  });
});

但是，您可能希望尽量减少发出的 ajax 请求的数量，因此我建议将您的 ajax 请求放入 setTimeout 函数中，并在每次后续按键时将其清除。 -

$(document).ready(function() {
  var ajaxRequest;
  $('#screenName').keyup(function() {
    var value = $(this).val();
    clearTimeout(ajaxRequest);
    ajaxRequest = setTimeout(function(sn) {
      $.ajax({
        type: 'post',
        url: 'screenNameCheck.php',
        data: 'Screen_Name=' + value,
        success: function(r) {
          $('.screenNameError').html(r);
        }
      });
    }, 500, value);
  });
});