Fatal编程技术网
  • javascript/
  • Javascript在php项目中不起作用，用户仍然被路由到php页面，而不是停留在当前页面

Javascript在php项目中不起作用，用户仍然被路由到php页面，而不是停留在当前页面

javascript php jquery

Javascript在php项目中不起作用，用户仍然被路由到php页面，而不是停留在当前页面,javascript,php,jquery,Javascript,Php,Jquery,以下是我的index.html页面代码：- <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <HTML> <head> <meta http-equiv="Content-Type" content="text/html; charset

以下是我的index.html页面代码：-

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<HTML>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        </meta>
        <title>School</title>
        <script type="text/javascript" src="script/jquery-1.8.2.min.js"></script>
        <script type="text/javascript" src="my_script.js"></script>
        <link rel="stylesheet" type="text/css" href="style.css" />
    </head>
    <body>

        <div style="margin:auto; width:1000px;">

            <div class="flt topblock"> <a href="" class="flt1 tp_txtplay">Play School</a>
                <br/><br/>
                <div>

                    <form id='myform' method='post' action='welcome.php' >
                        <span class="flt1 lp_txtlog">Email ID</span>
                        <input name="username" type="text" id="username" class="flt lp_textbox" />
                        <br />
                        <span class="flt1 lp_txtlog2">Password</span>

                        <input name="password" type="password" id="password" class="flt lp_textbox2" />
                        button id="submit" class='flt lp_button'>Login</button>
                    </form>
                    <div id="ack"></div>
                </div>
            </div>
        </div>
    </body>
</html>
下面是我的welcome.php代码：-

<!DOCTYPE html>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <title></title>
    </head>
    <body>
        <?php
        $con = mysql_connect('localhost', 'root', 'Wahegurug@9');
        mysql_select_db('test', $con);
        if (!$con) {
            die('Could not connect: ' . mysql_error());
        }

        $sql = "SELECT * FROM user ";

        $res = mysql_query($sql);
        if ($row = mysql_fetch_array($res)) {
            if ($row['Username'] == $_POST['username']) {
                if ($row['Password'] == $_POST['password']) {
                    echo'login successful';
                } else {
                    echo'login failed';
                }
            }
        }
        ?>
    </body>
</html>
详细信息如下：-我在Netbeans 7.3中使用xampp服务器完成了这个项目。我创建了一个简单的登录页面，并试图使用javascript来防止在输入错误凭据时提交页面

在my_script.js中，我使用id为ack的div向用户显示成功或错误消息

我的问题是，即使输入了错误的凭据，用户仍然被重定向到welcome.php（我表单的目标）。如何防止这种情况发生？

您需要做的是防止默认操作

改变

$("button#submit").click( function() {
到

此外，您在此处显式调用submit函数：

$("#myForm").submit(function() {
    return false;
});
请尝试删除此代码，它可能在$.post调用完成之前解析

最后，jquery代码应该包装在document.ready块中

  $(document).ready(function(){
        $("button#submit").click(function(event) {
            event.preventDefault();
            if ($("#username").val() == "" || $("#password").val() == "")
                $("div#ack").html("Please enter both username and password");
            else
                $.post($("#myForm").attr("action"),
                        $("#myForm :input").serializeArray(),
                        function(data) {
                            $("div#ack").html(data);
                        });

        });
  });
至于您的welcome.php页面，这可能会更好地为您服务

  <?php
  $con = mysql_connect('localhost', 'root', 'Wahegurug@9');
  mysql_select_db('test', $con);
  if (!$con) {
      die('Could not connect: ' . mysql_error());
  }

  $sql = "SELECT * FROM user where Username = '".mysql_real_escape_string($_POST["username"])."'";

  $res = mysql_query($sql);
  if ($row = mysql_fetch_array($res)) {
        if ($row['Password'] == $_POST['password']) {
            echo'login successful';
            return;
        }
  }
  echo'login failed';
  ?>

您需要做的是阻止默认操作

改变


$("button#submit").click( function() {


到

此外，您在此处显式调用submit函数：


$("#myForm").submit(function() {
    return false;
});


请尝试删除此代码，它可能在$.post调用完成之前解析

最后，jquery代码应该包装在document.ready块中


  $(document).ready(function(){
        $("button#submit").click(function(event) {
            event.preventDefault();
            if ($("#username").val() == "" || $("#password").val() == "")
                $("div#ack").html("Please enter both username and password");
            else
                $.post($("#myForm").attr("action"),
                        $("#myForm :input").serializeArray(),
                        function(data) {
                            $("div#ack").html(data);
                        });

        });
  });


至于您的welcome.php页面，这可能会更好地为您服务


  <?php
  $con = mysql_connect('localhost', 'root', 'Wahegurug@9');
  mysql_select_db('test', $con);
  if (!$con) {
      die('Could not connect: ' . mysql_error());
  }

  $sql = "SELECT * FROM user where Username = '".mysql_real_escape_string($_POST["username"])."'";

  $res = mysql_query($sql);
  if ($row = mysql_fetch_array($res)) {
        if ($row['Password'] == $_POST['password']) {
            echo'login successful';
            return;
        }
  }
  echo'login failed';
  ?>



您可以这样尝试


$("button#submit").click( function(e) {
    e.preventDefault();//Will prevent the default event of click


}); 



你可以这样试试


$("button#submit").click( function(e) {
    e.preventDefault();//Will prevent the default event of click


}); 


试试这个，它对我有用


试试这个，它对我很有用……
嗨，Orangepill，我尝试了你提到的以下解决方案，但仍然得到了相同的行为。即使我将值保留为blak，用户也会被路由到welcome.php页面。所以真的不知道为什么会发生这种情况。嗨，Orangepill，我尝试了您提到的以下解决方案，但仍然得到相同的行为。即使我将值保留为blak，用户也会被路由到welcome.php页面。因此，我真的不知道为什么会发生这种情况。抱歉，但这也不起作用。我尝试了，但得到了相同的结果。如果您还需要任何其他信息，请让我知道，但我确实想更正这个。很抱歉，但这个也不起作用。我尝试了，但得到了相同的结果。如果您还需要任何其他信息，请让我知道，但我确实想更正此问题。行为是否发生了任何变化？请尝试使用firebug或chrome开发工具查看网络，确保帖子正在发送，并且响应是什么。SCRIPT5009:“$”未定义my_script.js，第1行字符1我在IE9中运行本地主机时遇到此错误。因此，请您帮助解释为什么您将jquery包含在文档头中。如果是这样，那么您是在调用jQuery.noConflict（）；根据上面的HTML，您似乎是。仔细检查对jquery JS文件的引用是否位于html文件旁边的脚本目录中？行为是否发生了任何更改？请尝试使用firebug或chrome开发工具查看网络，确保帖子正在发送，并且响应是什么。SCRIPT5009:“$”未定义my_script.js，第1行字符1我在IE9中运行本地主机时遇到此错误。因此，请您帮助解释为什么您将jquery包含在文档头中。如果是这样，那么您是在调用jQuery.noConflict（）；根据上面的HTML，您似乎是。仔细检查对jquery JS文件的引用是否位于html文件旁边的脚本目录中？