Jquery Post multidimensional array via $.Ajax

Question

I am trying to post an ajax call as if it were the following form element:

<input type="text" name="data[BlogPost][title]" />

But I'm not having any luck here is my source:

    $.ajax({
        url: "/add/",
        type: "POST",
        data: ( /* what do I do here */),
        success: function(msg){
            alert(msg);
        }
    });

I've tried nested objects but that only generates a server response like: array 'data' => string '[object Object]' (length=15)

Which does nobody any good!

Any thoughts?

Answer 1

Have you tried serialize()?

$.ajax({
    url: "/add/",
    type: "POST",
    data: $('#myForm').serialize(),
    success: function(msg){
        alert(msg);
    }
});

I'm not 100% sure it works on multidimensional arrays but it's worth a shot.

Answer 2

My guess, [..] square brackets are not valid characters for names of input elements?

Correct me if I'm wrong.

Update: Oops, ok so I'm wrong. Will leave this here anyway as a 'learning' info. For others like me :)

Answer 3

Just put the field name in quotes, also notice I am using an object literal for the data parameter {} vs the parens you had in your question:

$.ajax({
    url: "/add/",
    type: "POST",
    data: { 'data[BlogPost][title]':'My New Title'} ,
    success: function(msg){
        alert(msg);
    }
});

Answer 4

SERIALIZE? Are you kidding me? REALLY? a freakin word that have saved me the already spent HOURS on arrays, .each, and other crap I tried and to come to find out that it's just ONE WORD called SERIALIZE?

or more of the term $('#myForm').serialize()

WOW. I'm using ASP.NET 4.0 Beta 2 w/ MVC 2 Preview 2 framework, DataAnnotations, Client-side Jquery Validations, jQuery AJAX, a "Notify" jQuery plugin, and a few others all just for resetting a password for a page. I love MVC 2...