0

私は自分のアプリケーションで ajax jquery の概念を使用しようとしていますが、これは私には初めてのことです。コードを書き出しました。しかし、正確な出力が得られません。私のコードは次のようなものです:

<script type="text/javascript" src="js/jquery-1.7.1.min.js"></script>
<form name="ajax" id="ajax" method="post" action="">
 Username: <input type="text" name="username" id="username" /><br />
 Password: <input type="text" name="pass" id="pass" value="" /><br />
 <input type="submit" name="sub_btn" id="sub_btn" value="Login" />
</form>
<script type="text/javascript">
$(document).ready(function(){
 $('#sub_btn').click(function(){
  var username = $('#username').val();
  var password = $('#pass').val();
  var datastring = "username="+username+"&password="+password;
  $.ajax({
   type:"POST",
   url: "bin/login-process.php",
   data: datastring,
   success: function(){
    alert("Success");
   },
   error: function(){
    alert("Fail");
   }
  });   
 });
});
</script>

bin/login-process.php ファイルでは、"hello" をエコーし​​ます。このページを実行しようとすると、警告メッセージ (「失敗」) が表示されますが、それは非常に短い時間であり、再び同じページにリダイレクトされます。しかし、ユーザーが「OK」ボタンをクリックするまでアラートメッセージを消したくありません。

4

5 に答える 5

2

ボタンのタイプを送信からこのようにボタンに変更します

<input type="button" name="sub_btn" id="sub_btn" value="Login" />

これは通常の POST メソッドでフォームを送信しているため、ページがリダイレクトされます。

返された出力を確認するには、次のように成功関数を記述します

success: function(response){
    alert("Success :"+response);
}
于 2012-12-26T12:27:19.543 に答える
0

これを使って：

<script type="text/javascript" src="js/jquery-1.7.1.min.js"></script>
    <form name="ajax" id="ajax" method="post" action="">
     Username: <input type="text" name="username" id="username" /><br />
     Password: <input type="text" name="pass" id="pass" value="" /><br />
     <input type="button" name="sub_btn" id="sub_btn" value="Login" />
    </form>
    <script type="text/javascript">
    $(document).ready(function(){
     $('#sub_btn').click(function(){
      var username = $('#username').val();
      var password = $('#pass').val();
      var datastring = $('#ajax').serialize();
      $.ajax({
       type:"POST",
       url: "bin/login-process.php",
       data: datastring,
       success: function(responce){
        alert("Success :"+ responce);
       },
       error: function(){
        alert("Fail");
       }
      });   
     });
    });
    </script>
于 2012-12-26T12:59:59.030 に答える