JQuery/AJAXを使用してJSONからPHPにHTMLフォームデータを送信

Question

ログインボタンをクリックすると、何らかの理由でページがリロードされます。それは私のPHPページからエコー文字列を警告する必要があります。

これは私のlogin.jsコードです：

$(document).ready(function(){ 
    $('#login').click(function(){ 


     $('#msgLoginStatus').show(); 
     $('#msgLoginStatus').html("processing..."); 

     $.post('login.php',{username:"bob",password:"pass"}, function(data){ 
      alert(data); 
     }); 
    }); 

}); 

私login.php：

<?php 
    echo "message"; 
?> 

と私形式：

  <form id="loginForm" action="" method="post"> 
      <fieldset id="body"> 
         <fieldset> 
          <label for="username">Username</label> 
          <input type="text" name="username" id="username" /> 
         </fieldset> 
         <fieldset> 
          <label for="password">Password</label> 
          <input type="password" name="password" id="password" /> 
         </fieldset> 
         <button id="login">login</button> 
         <label for="checkbox"><input type="checkbox" id="checkbox"  />Remember me</label> 
         <br /> 
         <p id="msgLoginStatus" style="display:none"></p> 
        </fieldset> 
        <span><a href="#">Forgot your password?</a></span> 
       </form> 

は、ブラウザのコンソールでは、エラーはありません。私も$ .ajaxを使ってこれを試しました。エラーを返しました。エラー変数をアラートに入れようとしましたが、警告があったときに空の文字列でした。誰でも何が間違っているのでしょうか？

Answer 1

あなたのログインボタンは、あいまいな作用を有し、 。

e.preventDefault(); 
$.post(...); 

しかし、フォームを送信する方が良いでしょう。既存のログインボタンのハンドラを「クリック」、単に「$ .post」の部分を削除し、ブラウザが投稿を処理させるにしてください

<form id="loginForm" action="/login.php" method="post"> 

：これを行うには、フォームで正しいaction="login.php"属性を指定します。あなたはまだ素晴らしい "処理中"のテキストを取得します。

さらに良いことに、代わりにボタンの「クリック」イベントのフォームに「送信」イベントを処理：

$('#loginForm').submit(function(e) { 
    $('#msgLoginStatus').show(); 
    $('#msgLoginStatus').html("processing..."); 
}); 

ユーザーが使用してフォームを送信するかどうか、あなたが素敵な最新情報を取得します。この方法ボタンを押すか、キーボードの "enter"を押してください。

Answer 2

試してみてください。

$('#login').click(function(e){ 
    e.preventDefault(); 
    $('#msgLoginStatus').show(); 
    $('#msgLoginStatus').html("processing..."); 

    $.post('login.php',{username:"bob",password:"pass"}, function(data){ 
     alert(data); 
    }); 
}); 

（あなたはすべてのエラーを取得されていません理由である、私が取る、）起こってから提出する「ノーマル」を防ぐことができます。

はCLCKハンドラにe.preventDefault();を追加（およびeとしてハンドラでイベントオブジェクトをつかむ）http://api.jquery.com/event.preventDefault/

Answer 3

を参照してください。

<button id="login" type="submit">Login</button> 

を今、あなたは本当にJavaScriptで明示的なPOSTを実行したい場合は、そのブラウザの自動「送信」アクションが抑制されますe.preventDefaultを呼び出します。このようtype="submit"を追加 -

Answer 4

ボタンタイプ=「ボタン」を設定し、送信することはできません。また、これはブラウザのイベントに停止する必要はありません。このようにして、あなたのコード

<button id="login" type="button">Login</button> 

を実行します