jQuery AJAX转移到页面

I am using PHP Mailer, I have this at the end of the send mail php file, so I can get the response using an AJAX form.

if(!$mail->send()) {
                $resp['errmessage'] = 'Mail error: '.$mail->ErrorInfo;
            } else {
                $resp['errmessage'] = 'Message sent succesfully!';
                $resp['status'] = 'success';
            }
echo json_encode($resp);

I have this jQuery currently:

$(document).ready(function() {  
var theForm = $(".my-form");
theForm.validate({
submitHandler: function(theForm) {
$('#send-button').hide();
$('#loading-button').show();
$.ajax({
type: 'POST',
    url: '<?php echo $domain; ?>/thefile.php',
    success: function(response) { 
                if (response.status == 'success') {
                $('#loading-button').html('sent');
            }
            $('#loading-button').html(response.errmessage); 
                };
            });
        return false;
}
    });
});

Instead of giving the error or status message though it is just diverting to the page to show the error, is there something I am doing wrong so far?

Thanks!

After adding header('Content-type: application/json'); to the PHPMailer send file, it worked!