0

这是我的 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>

这是 my_script.js 代码：-

$("button#submit").click(function() {
    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);
                });

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

});

以下是我的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（我的表单的目标）。我怎样才能防止这种情况发生？

4

3 回答 3

3

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

改变

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

至

$("button#submit").click( function(event) {
    event.preventDefault();

您还在这里显式调用了提交函数：

$("#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';
  ?>

这只会获取并检查相关用户的密码，并且在所有情况下都会返回失败。另外，我删除了框架页面标记，因为它被注入到现有页面中。

于 2013-06-03T05:00:47.200 回答
1 
     $(document).ready(function(){
             $("button#submit").click(function(event) {     
            var is_send=true;   
            var username=$("#username").val();
            var password=$("#password").val();
                 if (username == "" || $(password == "")        
                     {
                     $("div#ack").html("Please enter both username and password");  
                     is_send=false;     
                     }
                else
                     $.post($("#myForm").attr("action"),
                             $("#myForm :input").serializeArray(),
                             function(data) {
                                 $("div#ack").html(data);
                             });    
                  if(is_send==false) 
                  {
                  return false;
                  }

             }); 
            });

试试这个，它对我有用....

于 2013-06-03T07:22:17.030 回答
0

you may try like this .

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


});
于 2013-06-03T06:08:53.973 回答