jQuery Ajax post not passing parameters

I'm attempting to use jQuery's $.ajax() function to post form variables to an MVC route. Problem is, when the code hits my MVC action, all of the parameters are null, even though data is being passed to them:

jQuery:

$(function () {
    $('#signupform').submit(function (e) {
        e.preventDefault();

        if ($(this).valid()) {
            var postData = '{name : "' + $("#Name").val() + '", email : "' + $("#Email").val() + '", message : "' + $("#Message").val() + '" }';

            $.ajax({
                url: "/api/contact-form-post",
             开发者_如何学Go   data: postData,
                type: "get"
            })
            .complete(function (data) {
                $("#formContainer").html($("#formThankYou").html());
            });
        }
    });
});

calling alert(postData) outputs the following:

{name : "Scott Smith", email : "scott@smith.com", message : "test message" }

MVC Action:

public JsonResult ContactFormPost(string email, string name = "" , string message = "")
        {
            AddEmailToMailingList(email);

            if (!String.IsNullOrEmpty(name) && !String.IsNullOrEmpty(message))
            {
                InsertContactMessage(email, name, message);
            }

            return Json(true);
        }

Using FireBug to examine the request reveals that this is the URL that's being called. Obviously the url parameters are not in the correct format, but I can't figure out why.

http://localhost:10637/api/contact-form-post?{name%20:%20%22Scott%20Smith%22,%20email%20:%20%22scott@smith.com%22,%20message%20:%20%22Test%20message%22%20}

Am I making any obvious mistakes here that would cause the parameters of my ContactFormPost method to always be null?

Unquote postData, pass $.ajax a real JS object.

var postData = {
    name: $("#Name").val(),
    email: $("#Email").val(),
    message: $("#Message").val()
};

Trinidad is correct about unquoting the object. You only need to do that with ASP.NET AJAX services, which expect the data to come in as a JSON string.

Another issue is that your return statement needs to explicitly allow the GET verb since you're trying to use it:

return Json(true, JsonRequestBehavior.AllowGet);

Trinidad is right, but if you must post JSON, then use the POST method, not GET.

I had a similar problem where it would post perfectly in chrome and safari on my desktop, but when I tried it in mobile safari, all of the values would be null when they got to my webservice.

It turned out to be an issue with my url because I have a filter on my webservice that redirects all paths to one with a trailing backslash.

This would not work in mobile safari, but would otherwise...

$.ajax({
    ...
    url: 'foo',
    dataType: 'json',
    type: 'POST',
    ...
});

It seemed that safari didn't like the temporary redirect caused by my filter, and stripped out the data. To get it to work, I had to append the slash to the url of my ajax call.:

$.ajax({
    ...
    url: 'foo/',  // note the trailing slash
    dataType: 'json',
    type: 'POST',
    ...
});

Update: Turns out this is not limited to JS. Basic form posts have the same behavior on mobile safari. This passes null values to my service:

<form action="foo" method="POST">
    <input type="text" name="pleaseDontBeNull" value="swearImNotNull"/>
</form>

This works properly:

<form action="foo/" method="POST">  <!-- note the trailing slash -->
    <input type="text" name="pleaseDontBeNull" value="swearImNotNull"/>
</form>