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无法正常工作

回答

相关问题