Question

所以我正在开展这个项目，我在这个项目中创建了一个管理区域。当我在处理登录功能时，我想要一个这样的功能： - 一旦用户填写所有条目（用户名和密码），系统就会自动将其登录。他不需要点击提交按钮。同样，如果密码不正确，他应该收到错误消息。我该如何实现此功能？我想这可以通过jQuery和Ajax来完成，而且我对它们都没有任何了解。如果有人能指引我朝正确的方向发展，那就太好了。

Admin_login.php

<form class="form-horizontal" action="****" method="post" id="login">
                        <fieldset>
                            <div class="input-prepend" title="Username" data-rel="tooltip">
                                <span class="add-on"><i class="icon-user"></i></span><input autofocus class="validate[required] text-input, input-large span10" name="username" id="username" type="text" placeholder="Username"/>
                            </div>
                            <div class="clearfix"></div>

                            <div class="input-prepend" title="Password" data-rel="tooltip">
                                <span class="add-on"><i class="icon-lock"></i></span><input class="validate[required] text-input, input-large span10" name="password" id="password" type="password" placeholder="password"/>
                            </div>
                            <div class="clearfix"></div>
                            <div class="clearfix"></div>
                            <p class="center span5">
                            <button type="submit" class="btn btn-primary">Login</button>

                            </p>
                        </fieldset>
                    </form>

数据库表

Column Name    Type
Username        VARCHAR
Password        VARCHAR

Answer 1

我写了一个git。
这是链接： https://github.com/FabioSorre/HTML-PHP-AJAX-JQUERY-JS

步骤如下：

Html：没有表单操作（action =＆＃34;＆＃34;）并指定方法（客户端）
Javascript / Jquery：onSubmit函数调用（客户端）
设置JSON回调（客户端）
Php文件（设置json_encode，操作和响应）（服务器端）
显示结果（客户端）

Answer 2

尝试使用setInterval（）执行一个函数，该函数检查两个字段是否每100MS填充一次。请不要这是一个肮脏的黑客。我建议使用更好的验证方法。谷歌可以帮助你

<script>

function checkCompleteness(){
    if($('#username').val()!=='' || $('#password').val()!==''){

    //POST DATA HERE MAYBE WITH AJAX OR TRIGER SUBMIT(GOOGLE HOW)
    $.post(
        'my/endpoint',
    {

        username:$('#username').val(),
        password: $('#password').val()

    }, function(response){
        // ACT ON RESPONSE STATUS
    });
}

//CHECK BOTH FIELDS EVERY 100 MS
setInterval(checkCompleteness(), 100);

</script>

Answer 3

好的，所以我大声思考，但我希望这会引导你走向正确的方向。

让我们假设您在登录时输入的角色可能延迟1秒。让我们假设当用户完成输入密码时，将经过2或3秒。您可以在输入密码后使一个等待2秒钟的侦听器然后触发提交文件。当然你应该检查用户名是否也是键入的（最小字符而不是空例外）。

你可以像这样制作2秒钟的听众：

Javascript代码：

// Trigger a callback function after a given time
var wait = (function(){
  var timer = 0;
  return function(callback, ms){
    clearTimeout (timer);
    timer = setTimeout(callback, ms);
  };
})();

// Trigger the submit via AJAX

wait(function(){
        // form validation

        $.ajax({
            url: '/Admin_login.php',
            type: 'POST',
            dataType: 'default: Intelligent Guess (Other values: xml, json, script, or html)',
            data: {
                username: $('#username').val(),
                password: $('#password').val()
            },
        })
        .done(function() {
            console.log("success");
        })
        .fail(function() {
            console.log("error");
        })
        .always(function() {
            console.log("complete");
        });

    }, 2000); // It submits the form via AJAX after 2 seconds have passed since 
              // the user typed something in the password field

<强> Admin_login.php

PHP部分更像是草图，但我希望你理解它背后的想法

<?php

$username = $_POST['username'];
$password = $_PSOT['password'];

//some more forom validation

$loggedin = login($username, $password);

if ($loggedin) {
    // Loggedin
}
else {
    // renegerate form
}

?>

<强> P.S。不要忘记避免SQL注入并转义任何特殊字符，有关此主题的更多信息，请访问：How can I prevent SQL injection in PHP?

让我发布，祝你好运！：）

登录而不点击提交

3 个答案: