Jquery Ajax not sending through to php

I have tried many thing but cannot get this to work. The variables that are passed to the ajax code 100% have string within them. I have tested the code bit by bit until the ajax code and after. Everything before proves that the variables do no get 'lost' they display the correct values. I even tried a simple "test" string without using ANY other data to be sent through ajax. Still no data gets received by the PHP code. Based on my test literally no POST data is being passed through to the PHP script. The php script is on the same page. The page is called slate_designer.php

jquery:

$('#submit').on('click', function () {
var firstname = $('#firstname').val();
var lastname = $('#lastname').val();
var email = $('#email').val();
var tel = $('#tel').val();
    var slate = $( '#slate' ).html();
    var dataToSend = {
    "firstname" : firstname,
    "lastname" : lastname
};
var serialized = dataToSend.serialize();
$.ajax({
        url: 'slate_designer.php',
        type: 'POST',
        dataType:'json',
        data: serialized 
    });

php:

if(isset($_POST["firstname"])){
$firstname = $_POST["firstname"];
$lastname = $_POST["lastname"];
$email_address = $_POST["email"];
$phone_num = $_POST["tel"];
$comment = $_POST["comment"];
$slate = $_POST["slate"];
$header .= "MIME-Version: 1.0\n";
$header .= "Content-Type: text/html; charset=utf-8\n";
$headers .= "From:" . $email_address;
$headers .= "To: sergey95@gmail.com";
$message = "";
$message = "Name: " . $firstname . " " . $lastname . "\n";
$message .= "Email: " . $email_address . "\n";
$message .= "Phone Number: " . $phone_num . "\n";
$message .= "Message: " . $comment . "\n";
$message .= "Slate: \n" . $slate . "\n"; 

$to = 'email@gmail.com';
$subject = 'Order';
wp_mail( $to, $subject, $message );