Jquery ajax: object in data object

Question

I need to pass an object within the data object but it's not working

I use the following function I found on this very site, very useful, to convert form data to JSON

$.fn.serializeObject = function()
{
    var o = {};
    var a = this.serializeArray();
    $.each(a, function() {
        if (o[this.name] !== undefined) {
            if (!o[this.name].push) {
                o[this.name] = [o[this.name]];
            }
            o[this.name].push(this.value || '');
        } else {
            o[this.name] = this.value || '';
        }
    });
    return o;
};

and then I need to pass the object as a sub-object, but it's not working. Filters isn't even showing up in the query string parameters in the inspector

var filters = $('.filtersForm').serializeObject();

$.ajax({
    type: 'GET',
    data: {script:'search',page:page,filters:filters},
    success: function(data){
    }
});

enter image description here

See how "filters" is missing in the picture

Can someone please explain why I can't pass an object like that?

Any particular reason you're using this serializeObject function instead of JSON.stringify()? — Jon
– Jon, Commented Jul 11, 2013 at 17:58

John Strickler · Accepted Answer · 2013-07-11 17:58:05Z

4

Try this instead:

$.ajax({
  type: 'POST',
  data: JSON.stringify({
    script: 'search',
    page: page,
    filters: filters
  }),
  contentType: 'application/json'
});

Changed type from GET to POST. This will allow you to send a request body.
Stringify your data parameter using the built-in JSON object to stringify your JS object to a JSON-formatted string. (older browsers may not have this built-in object, in that case, add it using json2.js)
Set contentType to application/json. This basically states that the request-body is of this type... which it is because we just stringified it to JSON.

answered Jul 11, 2013 at 17:58

John Strickler

25.4k6 gold badges55 silver badges70 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

php_nub_qq Over a year ago

Why would I need to stringify my initial object?

John Strickler Over a year ago

Serializing your JavaScript object to a JSON-formatted string is the best way to send your complex data to the server (part opinion).

php_nub_qq Over a year ago

Well but sending objects works as well, why can't I send an object within the object without stringyfiying ? I updated the question with a picture

Jon Over a year ago

Data sent over HTTP has to be flat (serialized). JSON is often used because it lets you serialize complex objects. You can then easily deserialize on the server. If you 'stringify' your filters object, it should go over the wire with no problem.

php_nub_qq Over a year ago

Well that worked as to getting the parameter to show up, but now the object is always empty.. Doh!

Konstantin Heinrich · Accepted Answer · 2013-07-12 09:38:57Z

0

Try to specifiy your filters
For example in try : jsonfilter = JSON.stringify(filters);
If youre using MVC and ASP.Net you can try In your HTTPWebMethode which have a jsonResult as Return you can try to specifiy parameters

  public JsonResult myPostMethode(string script,object page,List<object> filters){

    //make some usefull 
    var model = script;
    return(model,JsonRequestBehavior.AllowGet);
}

edited Jul 12, 2013 at 9:38

answered Jul 11, 2013 at 18:17

Konstantin Heinrich

2563 silver badges17 bronze badges

Collectives™ on Stack Overflow

Jquery ajax: object in data object

2 Answers 2

5 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

5 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related