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

你的代碼看起來孤立的罰款。嘗試檢查控制檯是否有錯誤。 –

它沒有顯示任何erroe –

你的HTML和JavaScript是可以正常使用。你可以發佈你的PHP代碼？否則請嘗試將此代碼放入您的login.php文件中：

<?php 
    echo "form submitted"; 
?>

來源

2017-07-18 08:17:36

謝謝你Ganesan聖。該問題實際上是在login.php文件中解決。非常感謝 –

@MianSaeedAkbar如果問題出在代碼中，那麼您沒有證明您可能最好刪除此問題 - 或者至少張貼*解決了問題的代碼。只是隨機挑選一個無關的答案，將來不會有任何幫助。 –

如果你正在使用JS提琴然後導入jQuery的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無法正常工作

回答

相關問題