使 AJAX 表单工作的问题

Question

我正在尝试让一个基本的 AJAX 表单工作。我想通过 AJAX 在 PHP 表单成功后显示一行文本，但是在提交表单时，我只是被定向到 PHP 文件。任何人都可以识别问题以在登录成功后使文本出现在同一页面上吗？

代码如下：

HTML JS PHP

按顺序：

$(document).ready(function() {
    $(".loginform").submit(function () {
        var username = $('input[id=username]').val(); 
        var password = $('input[id=password]').val(); 
        $.ajax({
            type: "POST",
            url: "login.php",
            data : "username="+username+"&password="+password,
            type: "POST",
            success: function (data) {
                var success = data['success'];
                if(success == false){
                    var error = data['message'];
                    alert(error);
                }
                if(success == true) {
                    $('#result').write('Login success! Loading dashboard...');                                
                }
            }
        });           
    });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<p>
Please log in:

<form name="loginform" class="loginform" method="post" action="login.php">
Username: <input name="username" id="username" /><br />
Password: <input name="password" id="password" /><br />
<input name="submit" type="submit" />
</form>
</p>

<p>
<div id="result">

</div>
</p>

Answer 1

您需要返回 false 以防止表单提交。此外，您已声明 type: "POST" 两次，数据看起来更像 $_GET 请求。我已经更改了下面的代码。

$(document).ready(function() {
        $(".loginform").submit(function () {
            var username = $('input[id=username]').val();
            var password = $('input[id=password]').val();
            $.ajax({
                type: "POST",
                url: "login.php",
                data : {
                    username : username,
                    password: password
                },

                success: function (data) {
                var success = data['success'];
                    if(success == false){
                        var error = data['message'];
                        alert(error);
                    }
                    if(success == true) {
                        $('#result').write('Login success! Loading dashboard...');
                    }
                }

            });
            return false;
        });
    });

Answer 2

检查这个类似的：event.preventDefault doesn't seem to work

TLDR 回答：您只需 return false; 即可在 onSubmit 事件的回调中阻止 PHP 表单提交：

---

代码改进：

请使用正确的缩进以获得更好的清晰度，并随时关注 cmets 以获得一些改进建议；）。如果您需要更多说明，请告诉我:)

JQuery：

$(document).ready(function() {
      $(".loginform").submit(function (event) {
           // the proper way would be
           //var username = $('input#username').val(); 
           //var password = $('input#password').val(); 
           var username = $('input[id=username]').val(); 
           var password = $('input[id=password]').val(); 
           $.ajax({
                 type: "POST",
                 url: "login.php",
                 //based on michael's post it should be
                 //data: {username: username, password: password},
                 data : "username="+username+"&password="+password,
                 //type: "POST", <-- not needed based on michael's post
                 success: function (data) {
                       var success = data['success'];
                       //probably needs to be success==="false" and I suggest 
                       //not to use success name again in there..
                       if(success == false){ 
                           var error = data['message'];
                           alert(error);
                        }
                        // probably should be just else{ or else if(success==="true")
                        // I would check it first in the if because usually you will  
                        // have a success more often than a failure
                        if(success == true) {  
                             //based on Styphon's answer there is no write so it  should be  
                             //one of: append(element), prepend(element), text("content") or html("content")
                             $('#result').write('Login success! Loading dashboard...');                                
                        }
                 }

           });  
           // return false is like calling event.preventDefault(); and event.stopPropagation(). 
           //As such prevents redirection to PHP/Server code */ or in other words it WON'T 
           //submit the form to PHP using the name=" " input attributes 
           //and method=" "/action=" " attributes in your form tag
           return false;        
      });
});

HTML

如果您仅通过 AJAX 而不是旧方式提交表单，那么您只需要我下面的任何内容。一些建议：

• 不要使用<br/>使用css定位
• 您也可以使用<button class="someclass">value</button> 而不是<input type="submit"/> 在javascript中你会做$("button.someclass").click(function(event){ blabla }) 而不是$(".loginform").submit(function(event){blabla}); 但不要忘记return false;

<p>
Please log in:
<form class="loginform">
    Username: <input id="username" /><br /> 
    Password: <input id="password" /><br />
    <input name="submit" type="submit" class="someclass" />  
</form>
</p>

<p>
<div id="result">

</div>
</p>

PHP：

重要提示：切勿在数据库中以纯文本形式存储密码（例如用于生产）。使用一些散列（MD5/SHA-1）并将用户输入的散列与数据库中的散列值进行比较（详情请参阅：How do I create and store md5 passwords in mysql）。 顺便说一句，这还不够，您还需要在散列之前使用 Salting ..

例如：

$hashedpass = hash('sha256', $pass);
$query = "select * from user where name = '$escapedName' and password = '$hashedpass'; ";

Answer 3

问题是您没有阻止表单提交，因此在它运行 Ajax 之后，表单继续像普通表单一样提交。要停止这种情况，只需在函数结束时 return false。

$(document).ready(function() {
    $(".loginform").submit(function () {
        var username = $('input[id=username]').val(); 
        var password = $('input[id=password]').val(); 
        $.ajax({
            type: "POST",
            url: "login.php",
            data : "username="+username+"&password="+password,
            type: "POST",
            success: function (data) {
                var success = data['success'];
                if(success == false){
                    var error = data['message'];
                    alert(error);
                }
                if(success == true) {
                    /* There is no .write function, you either want .append() to 
                    add text on to the end, or to replace the contents .text() 
                    or .html(). In this case I would use .text() */
                    $('#result').text('Login success! Loading dashboard...');
                }
            }
            return false; /* <-- returning false here stops the form submitting. */
        });           
    });
});

Answer 4

这可能不是你的问题，但 FWIW：

在您的 ajax 代码块中，您将数据发布到 login.php。您没有提及您的 ajax 源代码所在页面的名称——如果它是 login.php，那么您将得到您所描述的行为。

按照设计，AJAX 应该发布到外部（单独的）PHP 文件。有一种方法可以将 AJAX 发布到同一页面，但它需要配置（问 Felix Kling，他知道怎么做）。

查看此答案了解更多信息。

values not updated after an ajax response