阿贾克斯行事怪异

so I have this simple ajax request to see if a combination of username or password exists or not.

<script>
  $("form").submit(function(e){
    e.preventDefault();
    //send data to ajax file now
    $.ajax({
            type: 'POST',
            url: 'ajax_handler.php',
            data: $(this).serialize(),
            success: function (result) {
              alert(result);
            }
           });

  });
  </script>

ajax_handler.php file

$email = isset($_POST['email']) ? $_POST['email'] : '';
    $password = isset($_POST['password']) ? $_POST['password'] : '';
    echo "check";

After hitting submit, the ajax request runs and alert(result) alerts the entire HTML/CSS coding of the page where my <script> is. Why is this happening ?

You need to stop the PHP script from executing the rest of the page loaded.
You can do this by using exit() or die().

$email = isset($_POST['email']) ? $_POST['email'] : '';
    $password = isset($_POST['password']) ? $_POST['password'] : '';
    echo "check";
    die();