ajax jqueryが機能していません

Jquery Ajaxを使用してログインリクエストを送信しようとしています。しかし、フォームは提出していません。問題を見つけようとしていますが、できません。コードはシンプルですが、私はJavaScriptを学び始めたので、私のコードで問題を見つけられません。以下はそれで問題を見つけてくださいコード......ajax jqueryが機能していません

$(function() { 
 
    //get form by id 
 
    var form = $('#login_form'); 
 
    //get message container by is 
 
    var message = $('#message'); 
 
    //prevent default on form submit 
 
    $(form).submit(function(event) { 
 
    event.preventDefault(); 
 
    //serialize form data 
 
    var form_data = $(form).serialize(); 
 
    $.ajax({ 
 
     type: 'post', 
 
     url: $(form).attr('action'), 
 
     data: form_data 
 
    }).done(function(response) { 
 
     //set the class of message container to success 
 
     $(message).removeClass('error'); 
 
     $(message).addClass('success'); 
 
     //put data received from server 
 
     $(message).html(response); 
 
     //clear form 
 
     $('#email').val(''); 
 
     $('#password').val(''); 
 
    }).fail(function(data) { 
 
     //set the class of message container to error 
 
     $(message).removeClass('success'); 
 
     $(message).addClass('error'); 
 
     //put the error message 
 
     if (data.responseText !== '') { 
 
     $(message).html(data.responseText); 
 
     } else { 
 
     $(message).text('Sorry...! an unexpected error has occured...!'); 
 
     } 
 
    }); 
 
    }); 
 
});

<html> 
 

 
<head> 
 
    <meta charset="UTF-8"> 
 
    <title>Ajax Practice</title> 
 
    <link href="assets/css.css" rel="stylesheet" type="text/css" /> 
 
    <script src="assets/jquery.js" type="text/javascript"></script> 
 
    <script src="assets/ajax_code.js" type="text/javascript"></script> 
 
</head> 
 

 
<body> 
 

 
    <div class="login_form_div"> 
 
    <form action="login.php" method="POST" name="login_form" id="login_form" class="login_form"> 
 
     <div class="label"> 
 
     <label>Email:</label> 
 
     </div> 
 
     <div class="form_input"> 
 
     <input type="text" name="email" id="email"> 
 
     </div> 
 
     <div class="label"> 
 
     <label>Password:</label> 
 
     </div> 
 
     <div class="form_input"> 
 
     <input type="password" name="password" id="password"> 
 
     </div> 
 
     <div class="form_input"> 
 
     <button type="submit" name="submit_form" id="submit_form">Login</button> 
 
     </div> 
 
    </form> 
 
    <span class="message1 error success" id="message"> 
 
      </span> 
 
    </div> 
 
</body> 
 

 
</html>

出典

2017-07-18 Mian Saeed Akbar

あなたのコードでは、孤立して罰金です。コンソールのエラーをチェックしてみてください。 –

これは何のエラーも表示されていません –

あなたのHTMLとJavaScriptは完全に取り組んでいます。あなたはあなたのPHPコードを投稿できますか？そうでない場合は、あなたのlogin.phpファイルにこのコードを入れてみてください。

<?php 
    echo "form submitted"; 
?>

出典

2017-07-18 08:17:36

ありがとうGanesan San。問題は実際にlogin.phpファイルにあり、解決されました。ありがとうalot –

@MianSaeedAkbarあなたが表示していないコードに問題があった場合は、おそらくこの質問を削除することをお勧めします - 少なくとも問題を解決したコードを投稿してください。無関係な答えをランダムに選ぶだけで、将来誰にも役立たないでしょう。 –

あなたが、その後の左側にあるドロップダウンにjqueryのjsのファイルをインポートJSフィドルを使用している場合がありますパネル。

$(function() { 
 
    //get form by id 
 
    var form = $('#login_form'); 
 
    //get message container by is 
 
    var message = $('#message'); 
 
    //prevent default on form submit 
 
    $(form).submit(function (event) { 
 
     event.preventDefault(); 
 
     //serialize form data 
 
     var form_data = $(form).serialize(); 
 
     $.ajax({ 
 
      type: 'post', 
 
      url: $(form).attr('action'), 
 
      data: form_data 
 
     }).done(function (response) { 
 
      //set the class of message container to success 
 
      $(message).removeClass('error'); 
 
      $(message).addClass('success'); 
 
      //put data received from server 
 
      $(message).html(response); 
 
      //clear form 
 
      $('#email').val(''); 
 
      $('#password').val(''); 
 
     }).fail(function (data) { 
 
      //set the class of message container to error 
 
      $(message).removeClass('success'); 
 
      $(message).addClass('error'); 
 
      //put the error message 
 
      if (data.responseText !== '') { 
 
       $(message).html(data.responseText); 
 
      } else { 
 
       $(message).text('Sorry...! an unexpected error has occured...!'); 
 
      } 
 
     }); 
 
    }); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<html> 
 
    <head> 
 
     <meta charset="UTF-8"> 
 
     <title>Ajax Practice</title> 
 
     <link href="assets/css.css" rel="stylesheet" type="text/css"/> 
 
     <script src="assets/jquery.js" type="text/javascript"></script> 
 
      <script src="assets/ajax_code.js" type="text/javascript"></script> 
 
      </head> 
 
<body> 
 

 
     <div class="login_form_div"> 
 
      <form action="login.php" method="POST" name="login_form" id="login_form" class="login_form"> 
 
       <div class="label"> 
 
        <label>Email:</label> 
 
       </div> 
 
       <div class="form_input"> 
 
        <input type="text" name="email" id="email"> 
 
       </div> 
 
       <div class="label"> 
 
        <label>Password:</label> 
 
       </div> 
 
       <div class="form_input"> 
 
        <input type="password" name="password" id="password"> 
 
       </div> 
 
       <div class="form_input"> 
 
        <button type="submit" name="submit_form" id="submit_form">Login</button> 
 
       </div> 
 
      </form> 
 
      <span class="message1 error success" id="message"> 
 
      </span> 
 
     </div> 
 
    </body> 
 
    </html>

出典

2017-07-18 07:30:16 Jeffin

応答ありがとうございますが、もう一度同じ問題 –

実は問題はここにありました。デフォルトのフォーム提出はjavascriptによって防止されていて、私はメッセージを探していました。

if (isset($_POST['submit_form'])) { 
$email = mysqli_real_escape_string($_POST['email']); 
$password = mysqli_real_escape_string($_POST['password']); 
if (!empty($email) && !empty($password)) { 
    echo "Login Must be Successful...!"; 
} else { 
    echo "Login Failed....!"; 
}

}

出典

2017-07-18 10:39:29

ajax jqueryが機能していません

答えて

関連する問題