Fatal编程技术网
  • javascript/
  • Javascript Ajax在PHP页面上不起作用

Javascript Ajax在PHP页面上不起作用

javascript php ajax

Javascript Ajax在PHP页面上不起作用,javascript,php,ajax,Javascript,Php,Ajax,我试图理解将AJAX与PHP结合使用的基础知识，以便使用PHP页面提供函数，但不改变我在MVC设计中的“视图” 所以我创建了这个基本的登录页面 <!DOCTYPE html> <head> <title>learning Php</title> <script src="//code.jquery.com/jquery-1.11.3.min.js"></script> <!-- Latest co

我试图理解将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
$（文档）.ready（函数（）{
$（#“登录”）。单击（函数（）{
var action=$（“#form1”）.attr（“action”）；
变量形式_数据={
用户名：$（“#用户名”）.val（），
密码：$（“#密码”）.val（），
这是阿贾克斯：1
};
$.ajax({
类型：“POST”，
url:action，
数据：表格数据，
成功：功能（响应）
{   
如果（响应=‘成功’）
{
$（“#form1”）.slideUp（'slow'，function（）{
$（“#message”）.html（“
您已登录。
”；
};
}
其他的
$（“#message”）.html（“
密码或用户名不正确。
”；
}
});
返回false；
});
});

用户名：



密码：
这是我的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提交吗？

一个小错误

$(#"login").click(function() {
这应该是

$("#login").click(function() {
  ^ // # inside quotes.
这里还有一个错误

if(response == 'success')
{
    $("#form1").slideUp('slow', function() {

    });  <--- You Missed ")" here 
}

if（响应==“成功”）
{
$（“#form1”）.slideUp（'slow'，function（）{

})除了打字错误和洛奇在<代码>>上的出色表现之外；啊!！抢手货我进行了编辑并重新打开了页面。。。恐怕问题还在发生..嘎！还有另一个语法错误。。。忘记关闭.slideUp（）函数的父项。。经过这两次修复后，它现在可以工作了。非常感谢你！不是那里的错误，OP会在firebug的控制台上看到这个错误。。。由于某些原因，消息总是“用户名或密码不正确”。即使在用户名和密码字段中键入了demo和demo。检查控件是否正在输入
if（）
如果绑定
$（“#form1”）。提交（）
而不是
$（“#login”）。单击（）
？旁注：用于调试代码。在不久的将来，它将对您有所帮助。您确实应该使用PHP来处理密码安全问题。如果您使用的PHP版本低于5.5，则可以使用
密码\u hash（）
。这篇文章中描述了一个问题。@JayBlanchard明白了，这或多或少是我在试图理解如何使用AJAX抛出数据。从未打算在实验室外看到曙光：）好吧@Christopher接受每个人的答案，包括我自己的答案，你将有一个工作演示；-）我们称之为集体努力；-）否，
==
可用于比较。修剪
响应
，可能有一个在返回中看不到的字符，如换行符@Christopher@Christopher我很困惑。正如我前面所说，我不知道您是如何访问它的，正如
http://localhost/file.xxx
或as
file:///file.xxx
在您的浏览器中，这里有所不同，如果该学校的服务器允许您访问JS/PHP等。请在免费主机服务上试用，您一定会看到它正常工作。您可以尝试将
if（isset（$is_ajax）&$is_ajax）
更改为
if（isset（$is_ajax））
或
if（！empty（$is_ajax））
，但有点怀疑。这两种方法对我都有效，语法也有效。我不知道在这里还能说什么/做什么，对不起，克里斯托弗。@Christopher Holy！@*$&哈哈，你知道吗？早些时候，关于
trim（）
，我确实有过这样的想法*高呼。。。为什么我没有按照我的直觉去做呢？@Christopher你可能在某个地方输入了一些信息。当在任何一个输入的末尾输入一个空格时，事实上确实给了我一个“错误的密码或用户名”的错误。有趣的是，一个空间会对一个人的一天产生什么影响。哦，问题解决了，杰伊的评论帮助我们度过了这一切。很高兴看到这个问题得到解决，所有最好的朋友，干杯

<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" />



<!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>