Question

Curious if anyone knows what the difference is in regards to the data parameter.

I have a $.post method that takes a $('#myform').serialize() as my data param and works.

If I try the same using the $.ajax() approach, it doesn’t work as my data param doesn’t appear correct.

Does anyone know the difference and what I might use instead of the above .serialize?

Answer 1

After re-reading some online documentation, I decided to stick with $.post over $.ajax.

The $.ajax method’s data param does something different than the $.post method does, not sure what exactly, but there is a difference.

The only reason I wanted to use $.ajax is because I wanted to be able to handle events and didn’t realize I could do so with $.post.

Here is what I ended up with

function GetSearchItems() {
    var url = '@Url.Action("GetShopSearchResults", "Shop", New With {.area = "Shop"})';
    var data = $("#ShopPane").serialize();
    // Clear container
    $('#shopResultsContainer').html('');
    // Retrieve data from action method
    var jqxhr = $.post(url, data);
    // Handle results
    jqxhr.success(function(result) {
        //alert("ajax success");
        $('#shopResultsContainer').html(result.ViewMarkup);
    });
    jqxhr.error(function() {
        //alert("ajax error");
    });
    jqxhr.complete(function() {
        //alert("ajax complete");
    });

    // Show results container
    $("#shopResultsContainer").slideDown('slow');
}

JQuery 3.x

The jqXHR.success(), jqXHR.error(), and jqXHR.complete() callback
methods are removed as of jQuery 3.0. You can use jqXHR.done(),
jqXHR.fail(), and jqXHR.always() instead.

var jqxhr = $.post(url, data);
// Handle results
jqxhr.done(function(result) {
    //alert("ajax success");
});
jqxhr.fail(function() {
    //alert("ajax error");
});
jqxhr.always(function() {
    //alert("ajax complete");
});

https://api.jquery.com/jquery.post/