AJAX form submission in jQuery

Question

I have a problem when I try to send some data with $.post(jquery ajax function) - it's not working. My code is here:

$.post(
    $(this).attr("action"),
    {     
        task: "add",
        $(this).serialize()
    },
    function(data) {
        if (data.length > 0 ) {
            alert("Success");
        }
    }
);

I am guessing the problem is with the data being sent, actually I have one complete AJAX page with lots of switch case statements to perform so for that I need to specify the task variable every time I send and AJAX request.

If there are better solutions on how to solve this issue feel free to share your thoughts. Thank you.

Answer 1

It should have been like below I think.

$.post(
    $(this).attr("action"),
    {task:"add",'data': $(this).serialize()},
    function(data){
        if(data.length > 0 ){
            alert("Success");
        }
    }
);

Answer 2

The problem is with this part:

{     
    task: "add",
    $(this).serialize()
}

That's going to throw a syntax error because it's not a valid object literal. Calling $(this).serialize() returns a string, which is the query string for the request. What you could do is this instead:

$.post($(this).attr('action'), $(this).serialize() + '&task=add', function(data) {...});

Answer 3

The problem is probably that the part

{task:"add",$(this).serialize()}

is invalid as a label is required after the comma.

{task: "add", data: $(this).serialize()}

would at least result in a valid object, but not one that makes sense to post to the server.

I think the easiest solution would be something like

$.post($(this).attr("action"),
$(this).serialize() + '&task=add',
function(data){
 if(data.length > 0 ){
   alert("Success");
}
});