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

このように試すことができます。

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


});
于 2013-06-03T06:08:53.973 に答える