Question

我使用PHP创建了一个简单的单词密码登录。密码存储在php文件中 - 我知道这不是非常安全，但我想要的是人们无法漫游到网站。

为了测试密码，密码

你可以看到，当它出错时，我有一个jQuery震动效果。

我的问题：

为什么我的提交按钮在按下提交按钮时无法使用正确的密码？为什么按返回的行为与提交按钮的行为不同？

我的代码：

HTML：

<!DOCTYPE html>
<html lang="en">
  <head>

    <script type="text/javascript" src="js/jquery-1.3.2.min.js"></script>
    <script type="text/javascript" src="js/vibrate.js"></script>

  </head>
  <body>

      <!-- body content -->
      <div class="wrapper">

          <!-- container -->
          <div class="container">

            <div class="col-lg-12">
                <div id="login" class="form-wrapper content-flood">
                    <form action='php/login.php' method="post" class="login-form" id="loginform">
                          <h3 class="text-center">Enter your password:</h3>
                          <input type="password" name="password">
                          <input type="button" name="Submit" id="submit_butt" value="Submit" formaction="php/login.php"/>
                    </form>
                </div>
            </div>

          </div>
          <!-- end container -->

      </div>
      <!-- end body content -->

<script type="text/javascript">

$(document).ready(function() {

    $("#submit_butt").click( function() {

        // configurations for the buzzing effect. Be careful not to make it too annoying!
        var conf = {
                frequency: 5000,
                spread: 5,
                duration: 600
            };

        /* do your AJAX call and processing here...
            ....
            ....
        */

        // this is the call we make when the AJAX callback function indicates a login failure 
        $("#login").vibrate(conf);

        // let's also display a notification
        if($("#errormsg").text() == "")
            $("#loginform").append('<p id="errormsg">Oops, wrong password!</p>');

        // clear the fields to discourage brute forcing :)

        $("#pwd").val("");
    });

});
</script>

</body>
</html>

PHP：

<?php
// this password may come from any source.
// it's a variable for the sake of simplicity

$password = 'password';

if($_POST['password'] == $password){
  $_SESSION["userid1"] = $id1;
header("Location: ../home.html"); // redirects
}else{

}
?>

使用Javascript：

jQuery.fn.vibrate = function(conf) {
        var config = jQuery.extend({
                speed: 30, 
                duration: 2000, 
                frequency: 10000, 
                spread: 3
        }, conf);

        return this.each(function() {
                var t = jQuery(this);

                var vibrate = function() {
                        var topPos = Math.floor(Math.random() * config.spread) - ((config.spread - 1) / 2);
                        var leftPos = Math.floor(Math.random() * config.spread) - ((config.spread - 1) / 2);
                        var rotate = Math.floor(Math.random() * config.spread - (config.spread - 1) / 2); // cheers to erik@birdy.nu for the rotation-idea
                        t.css({position: 'relative', left: leftPos +'px', top: topPos +'px', WebkitTransform: 'rotate(' +rotate +'deg)', WebkitTransform: 'rotate(0deg)'});
                };

                var doVibration = function () {

                        var vibrationInterval = setInterval(vibrate, config.speed);

                        var stopVibration = function() {
                                clearInterval(vibrationInterval);
                                t.css({position: 'static'});
                        };

                        setTimeout(stopVibration, config.duration);
                };

                /* 
                    Mofication by Kishore - I am commenting out the following line as it calls the vibration function repeatedly.
                    We need to call it only once. So, instead I make a call to doVibration() directly.
                */

                //setInterval(doVibration, config.frequency);
                doVibration();
        });
}

编辑：我在PHP中留下'else'，因为jQuery正在处理错误吗？

我无法获得这个工作的JSFIDDLE，但这里是正在运行的网站（也是测试版）。

http://hea.getevent.info/

Answer 1

使用输入类型提交而不是按钮

像

   <input type="submit" name="Submit" id="submit_butt" value="Submit" formaction="php/login.php"/>

否则，您可以使用输入类型按钮和使用AJAX提交表单。

Answer 2

您应该在表单的提交操作上注册一个监听器，而不是将监听器附加到提交按钮。这样你就可以捕获提交按钮点击（一旦它已经改变为提交按钮，就像其他问题所说的那样），有人只是按下键盘上的输入：

$(".login-form").on("submit", function(e)
{

    // Stop the form submitting
    e.preventDefault();

    // Do your checks for errors

    // If there are none

    $(this)[0].submit();

});

Answer 3

您的服务器返回HTTP 302而不是HTTP 200。我能够登录，但我确实看到了震动和Oops ...基本上是由于逻辑不良。

Remote Address:212.48.79.185:80
Request URL:http://hea.getevent.info/php/login.php
Request Method:POST
Status Code:302 Moved Temporarily
Request Headersview source

你的逻辑看起来不太正确，除非我遗漏了什么。我们看不到你的ajax但是下面的语句需要在ajax调用的成功回调中。输入和按钮点击对我来说都是一样的。 以下代码在您的ajax调用完成之前过早触发，并且您也不会阻止默认表单提交，因此它也会提交....两次。

   // this is the call we make when the AJAX callback function indicates a login failure 
    $("#login").vibrate(conf);

    // let's also display a notification
    if($("#errormsg").text() == "")
        $("#loginform").append('<p id="errormsg">Oops, wrong password!</p>');

您需要阻止默认设置，以便在确认密码后自行提交：

$("#submit_butt").click( function(e) {
     e.preventDefault();
     .......
});

Answer 4

您没有提交表单，这就是为什么它没有进行身份验证

您只需将输入类型从按钮更改为提交：

<input type="submit" name="Submit" id="submit_butt" value="Submit" formaction="php/login.php"/>

或者只是在点击事件中提交表单：

$("#submit_butt").click( function() {
  .
  .
  .

  $("#loginform" ).submit();
}

登录表单提交按钮不起作用

4 个答案: