Question

我正在创建一个注册页面，用户只能在其中选择可用的用户名，即数据库中不存在的用户名。所以我为此使用ajax ..但是当我一次输入太多请求时，它失败了，我的网站停止工作..过了一段时间，一切都会好起来的，但是5-10分钟后它将停止工作。

网站出现错误：-

此页面无法正常运行。collegespike.com没有发送任何数据。 ERR_EMPTY_RESPONSE

从数据库中获取数据的代码：

<?php

if (isset($_POST['user_name']) && $_POST['user_name'] != '') {
    $response = array();
    $username = mysqli_real_escape_string($db, $_POST['user_name']);
    $sql = "select username from login_master where username='" . $username . "'";
    $res = mysqli_query($db, $sql);
    $count = mysqli_num_rows($res);
    if ($count > 0) {
        $response['status'] = false;
        $response['msg'] = 'Username already exists.';
    } else if (strlen($username) < 6 || strlen($username) > 15) {
        $response['status'] = false;
        $response['msg'] = 'Username must be 6 to 15 characters';
    } else if (!preg_match("/^[a-zA-Z1-9]+$/", $username)) {
        $response['status'] = false;
        $response['msg'] = 'Use alphabet and numeric only.';
    } else {
        $response['status'] = true;
        $response['msg'] = 'Username is available.';
    }

    echo json_encode($response);
}
?>

Ajax代码：-

//including jquery 2.0.3
<script type="text/javascript" charset="utf8" src="https.://ajax.aspnetcdn.com/ajax/jQuery/jquery-2.0.3.js"></script>

//jquery code to fetch data
<script type="text/javascript">
$(document).ready(function() {
    $('#username').keyup(function() {
        var usercheck = $(this).val();
        $('#usercheck').html('<img src="images/loading.gif" width="150" />');
        $.post("signup/check1.php", {
            user_name: usercheck
        }, function(data) {
            if (data.status == true) {
                $('#usercheck')
                   .parent('div')
                   .removeClass('has-error')
                   .addClass('has-success');

            } else {
                $('#usercheck')
                   .parent('div')
                   .removeClass('has-success')
                   .addClass('has-error');
            }
            $('#usercheck').html(data.msg);
        }, 'json');
    });
});
</script>

HTML代码：- //接受输入并显示输出的代码

//taking input
<input class="check-form"  name="user_name" id="username" type="text"  placeholder="User Name (please enter unique username)">

//showing output
<span id="usercheck" class="help-block"></span>
<span><i class="ti-check"></i></span>

Answer 1

我认为该问题是由于托管服务器设置而引起的。如果您触发的发布请求过多，则服务器会因设置而阻止您60到120秒。

尝试使用GET请求而不是POST请求，我认为它将解决问题。

$(document).ready(function() {
    $('#username').keyup(function() {
        var usercheck = $(this).val();
        $('#usercheck').html('<img src="images/loading.gif" width="150" />');
        $.get("signup/check1.php", {
            user_name: usercheck
        }, function(data) {
            if (data.status == true) {
                $('#usercheck')
                   .parent('div')
                   .removeClass('has-error')
                   .addClass('has-success');

            } else {
                $('#usercheck')
                   .parent('div')
                   .removeClass('has-success')
                   .addClass('has-error');
            }
            $('#usercheck').html(data.msg);
        }, 'json');
    });
});

Answer 2

我相信您的问题是由于同时向服务器发出了太多请求。

我注意到您正在使用.keyup()，然后触发AJAX请求。这意味着，如果我要输入用户名Jonathan，则一秒钟内将触发8个请求。这将造成瓶颈。

如果打开控制台，您会注意到单个字符（单个请求）可以正常工作，在收到第一个字符的响应后，键入第二个字符，它将再次起作用。但是，快速键入并等待所有人都响应将不起作用。您会在控制台中看到它们将一直在加载和加载，直到它最终超时为止。

我建议您减少正在触发的请求，仅在x毫秒内停止按下键时才触发请求。

解决方案：

延迟键盘执行。这是我使用过多次的纯javascript解决方案，可在我的应用程序中使用。我已经对其进行了简化并对其进行了修改，以期能够满足您的要求。

您会注意到delayKeyupExecution()被调用，并且我们传递了myInput（在您的情况下，这是用户名），userNameAjaxCheck作为回调（这是包含您的ajax请求的函数））和500，这是延迟它的毫秒数。

// Your username input
var myInput = document.getElementById("username");

function userNameAjaxCheck(params) {
  // Your ajax code to check the username
};

// Delay a function from triggering
function delayKeyupExecution(input, callback, delay) {
  var timer = null;
  var params = null; // Anything you want to pass to the callback function (userNameAjaxCheck)

  input.onkeypress = function() { // Equivalent to your .keyup
    if (timer) window.clearTimeout(timer); 
    timer = window.setTimeout( function() {
      timer = null;
      callback(params); // Pass the params you need
    }, delay );
  };

  input = null;
};

// Execute
delayKeyupExecution(myInput, userNameAjaxCheck, 500);

当我发送太多请求时，它给出了失败，整个网站将停止工作

2 个答案: