jQuery Ajax请求没有到达PHP脚本

I'm trying to create a mail form which has javascript validation. The form values should be send with ajax to a php script which emails the data to an emailadress.

However, Neither the php code, succes or the error jquery callbacks gets called, nor are there any logs in the javascript console in chrome.

this is my simplified html page:

<form id="mail-form">
    <div class="input-row">
    <div class="label"><label for="name">Your name: *</label></div>
    <div class="input"><input type="text" name="name" id="name" maxlength="50"/></div>
        <input id="submit-button" type="submit" value="send"/>
</form>

my javascript:

$(document).ready(function () {
    var form = $("#mail-form");

    form.submit(function (e) {
        e.preventDefault();
        send(form);
    }
});

function send(form) {

    var formData = { name: $("#name").val(),
        email: $("#email").val(),
        phone: $("#phone").val(),
        message: $("#message").val(),
    };

    $.ajax({
        type: "POST",
        url: "/scripts/mailer.php",
        datatype: "text",
        data: formData,
        succes: function (data) {
            onSucces();
        },
        error: function () {
            onError();
        }
    });
}

and my simplified php file:

$myemail = "someone@something.com";
$subject = "test";

$message = $_POST["message"];

mail($myemail, $subject, $message);

echo "ok";

Can someone point out what I'm doing wrong? I also tried easy get methods, but they won't reach the server either.

try it like this:

change:

$(document).ready(function () {
    var form = $("#mail-form");

    form.submit(function () {
        e.preventDefault();
        send(form);
        }
    });
});

to:

$("#mail-form").submit(function (e) {
        e.preventDefault();
        send(form);
});

so it looks like this:

$("#mail-form").submit(function (e) {
        e.preventDefault();
        send(form);
});

function send(form) {

    var formData = { name: $("#name").val(),
        email: $("#email").val(),
        phone: $("#phone").val(),
        message: $("#message").val(),
    };

    $.ajax({
        type: "POST",
        url: "/scripts/mailer.php",
        datatype: "text",
        data: formData,
        success: function (data) {
            onSucces();
        },
        error: function () {
            onError();
        }
    });
}

Try this for your JavaScript; success was wrong and you had a pointless bracket in your submit() call:

$(document).ready(function () {
    var form = $("#mail-form");
    form.submit(function (e) {
        send(form);
        e.preventDefault();
        return(false);
    });
});
function send(form) {
    var formData = {
        name: $("#name").val(),
        email: $("#email").val(),
        phone: $("#phone").val(),
        message: $("#message").val(),
    };
    $.ajax({
        type: "POST",
        url: "/scripts/mailer.php",
        datatype: "text",
        data: formData,
        success: function(data){
            onSucces();
        },
        error: function(){
            onError();
        }
    });
}

You should never ever rely on data verification at client side.

To your question, use alert to confirm that neither success or error callback functions are being executed. You can also remove the dataType to see if that makes any difference.

You can also do this

var formData = form.serialize();

instead of this

var formData = { name: $("#name").val(),
    email: $("#email").val(),
    phone: $("#phone").val(),
    message: $("#message").val(),
};