Question

我试图理解将AJAX与PHP结合使用的基础知识，以便使用php页面来提供功能，但不会改变我对MVC设计的“视图”。

所以我创建了这个基本的登录页面......

 <!DOCTYPE html>
    <head>
    <title>learning Php</title>


<script src="//code.jquery.com/jquery-1.11.3.min.js"></script>
<!-- Latest compiled and minified JavaScript -->

<script type="text/javascript">
$(document).ready(function() {

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

        var action = $("#form1").attr("action");
        var form_data = {
            username: $("#username").val(),
            password: $("#password").val(),
            is_ajax: 1
        };

        $.ajax({
            type: "POST",
            url: action,
            data: form_data,
            success: function(response)
            {   
                if(response == 'success')
                {
                    $("#form1").slideUp('slow', function() {
                        $("#message").html('<p class="success">You have logged in.</p>');
                    };
                }
                else 
                    $("#message").html('<p class="error">Incorrect password or username.</p>');
            }

        });

        return false;
    });

});
</script> 

</head>
<body>
<div>
    <form name="form1" id="form1" method="post" action="loginForm.php">
        <p>
            <label for="username"> Username: </label>
            <input type="text" id="username" name="username" />
        </p>
        <p>
            <label for="password"> Password: </label>
            <input type="text" id="username" name="username" /> 
        </p>
        <p>
            <input type="submit" id="login" name="login" value="login" /> 
        </p>
    </form>
    <div id="message"></div>
<div>
</body> 
</html>

这是我的“处理”登录的php页面......

<?php

   $is_ajax = $_REQUEST['is_ajax'];
   if(isset($is_ajax) && $is_ajax)
   {
       $username = $_REQUEST['username'];
       $password = $_REQUEST['password'];

       if($username == 'demo' && $password == 'demo')
       {
           echo 'success';
       }
   }
?>

我遇到的问题是，每当我提交登录信息时，我都会被重定向到“/loginForm.php”而不是停留在我当前的页面上并在登录表单下面更改消息。

我尝试使用Firebug来帮助我追踪我怀疑是javascript错误，但无济于事。

有关我为何被重定向或为何表单未通过Ajax提交的想法？

Answer 1

这里还有一个错误

isolate_namespace

Answer 2

一个小错误

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

这应该是

$("#login").click(function() {
  ^ // # inside quotes.

Answer 3

除了错字和Rocky在}); <--- You Missed ")" here

上的好成绩

您的用户名和密码字段都相同。

<label for="username"> Username: </label>
<input type="text" id="username" name="username" />

和

<label for="password"> Password: </label>
<input type="text" id="username" name="username" />

第二个应该读为

<input type="text" id="password" name="password" />

在使用每个人的答案时，你将拥有一个工作脚本。

请记得在您上线后哈希密码。

编辑旁注：我在下面做了一个关于使用按钮而不是输入的说明。

以下是重写，以防万一。但是，输入必须是<button>。

<!DOCTYPE html>
    <head>
    <title>learning Php</title>


<script src="//code.jquery.com/jquery-1.11.3.min.js"></script>
<!-- Latest compiled and minified JavaScript -->

<script type="text/javascript">
$(document).ready(function() {

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

        var action = $("#form1").attr("action");
        var form_data = {
            username: $("#username").val(),
            password: $("#password").val(),
            is_ajax: 1
        };

        $.ajax({
            type: "POST",
            url: action,
            data: form_data,
            success: function(response)
            {   
                if(response == 'success')
                {
                    $("#form1").slideUp('slow', function() {
                        $("#message").html('<p class="success">You have logged in.</p>');
                    });
                }
                else 
                    $("#message").html('<p class="error">Incorrect password or username.</p>');
            }

        });

        return false;
    });

});
</script> 

</head>
<body>
<div>
    <form name="form1" id="form1" method="post" action="loginForm.php">
        <p>
            <label for="username"> Username: </label>
            <input type="text" id="username" name="username" />
        </p>
        <p>
            <label for="password"> Password: </label>
            <input type="text" id="password" name="password" /> 



<!--
Your original input
<input type="text" id="username" name="username" /> 
-->
        </p>


<button type="submit" id="login" name="login" />LOGIN</button>

<!--
Your original submit input. Don't use it
        <p>
            <input type="submit" id="login" name="login" value="login" /> 
        </p>
-->

    </form>
    <div id="message"></div>
</div>
</body> 
</html>

</body>之前的最后一个div未公开</div>，我已经改变了上述内容。

评论中的其他编辑。

似乎某处可能插入了一个空格，trim()的使用是该解决方案的最终指标。

response.trim();

特别感谢杰伊布兰查德帮助我们所有这些，为萨姆欢呼！

参考文献（TRIM）：

Ajax不能在PHP页面上工作

3 个答案: