javascript - 标签未显示 Ajax 的 JSON 响应

Question

我制作了一个简单的登录表单，试图通过 AJAX 调用进行验证。它工作成功。但问题是，当我输入正确的电子邮件或密码时，它会刷新整个页面，而不是在 div 中显示 JSON 成功错误，对于错误的电子邮件/密码也是如此。有什么建议请!!

代码

<script>
 $(document).ready(function() {
 $('#login_submit').click(function(){
 var  email = $("#email").val(),
 password = $("#password").val();
  var proceed = true;
  if(proceed){
 post_data= { 'Email': email, 'Password': password};
  $.post('login_index.php', post_data, function(response){
  //load json data from server and output message
   if(response.type == 'error')
   {
     output=$('.alert-error').html(response.text);
    }else{
    output=$('.alert-success').html(response.text);
   }
   $("#error").hide().html(output).slideDown();
                    }, 'json');
                }
           });
          });
    </script>

<div class="alert-error"></div>
<div class="alert-success"></div>
<div class="login">
    <form method="post" action="">
        <input type="email" name="email" id="email" placeholder="email" >
        <input type="password" name="password" id="password" placeholder="password">
        <input type="submit" name="login_submit" id="login_submit" value="login">
    </form>
</div>

PHP

    <?php
include "db/db.php";
session_start();
if($_POST){
    if(!isset($_SERVER['HTTP_X_REQUESTED_WITH']) AND strtolower($_SERVER['HTTP_X_REQUESTED_WITH']) != 'xmlhttprequest') {
 $output = json_encode(
            array(
                'type'=>'error',
                'text' => 'Request must come from Ajax'
            ));

        die($output);
    }
if(isset($_POST['Email']) && isset($_POST['Password']))
{
$email=filter_var($_POST["Email"], FILTER_SANITIZE_STRING);
$pwd=filter_var($_POST["Password"], FILTER_SANITIZE_STRING);
$query=mysqli_query($con,"select * from customers where email='$email' and password='$pwd'");
    $count=mysqli_num_rows($query);
    $row=mysqli_fetch_array($query,MYSQLI_ASSOC);
    if($row)
    {
       $_SESSION['login_email']=$row['email'];
        $output = json_encode(array('type'=>'message', 'text' => 'Hi '.$email .' You are successfully login'));
        die($output);

     }
    else{
        $output = json_encode(array('type'=>'error', 'text' => 'Could not login! Please check your email password.'));
        die($output);
    }
}

}

Answer 1

使用e.preventDefault()阻止form或submit按钮的默认操作，否则它将发布form 并发生页面刷新。

$('#login_submit').click(function(e){
     e.preventDefault(); //e is the event captured here
     //rest of the code
});