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

检查一下类似的：event.preventDefault doesn't seem to work

TLDR回答：您必须return false;才能阻止在onSubmit事件的回调中提交PHP表单：

代码改进：

请使用正确的缩进以获得更好的清晰度，并随意遵循评论以获得一些改进建议;）。如果您需要更多说明，请与我们联系：）

<强> 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 ..

e.g：

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

Answer 2

您需要返回false以防止表单提交。此外，您已声明类型：＆＃34; POST＆＃34;两次，数据看起来更像$ _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 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

让AJAX表单起作用的麻烦

4 个答案: