$.post is a shorthand way of using $.ajax for POST requests, so there isn't a great deal of difference between using the two - they are both made possible using the same underlying code. $.get works on a similar principle.
The problem here is not the fact $.ajax() is not working, it is because you did not set the type parameter in the Ajax request and it defaults to a GET request. The data is sent via the query string for get and if your backend expects them as post parameters, it will not read them.
$.post is just a call with $.ajax(), just with the type set. Read the docs and you will see that $.ajax() defaults to a GET as I mentioned above.
If you go to the jQuery.post page in the jQuery docs it shows you the $.ajax request with the type set. Again read the docs.
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.
Just as a complementary, in the accepted answer, it is mentionned that "The $.ajax method's data param does something different than the $.post method does, not sure what exactly, but there is a difference"
please try using :
{
...
data: JSON.stringify(yourJsonData),
...
}
Else the json object get's inserted in the payload as a url-encoded string.
Using $.ajax we can make GET or POST requests.
Using $.post we can make only post request.
Using $.get we can make only get request.
$.ajax() // Performs an async AJAX request
$.get() // Loads data from a server using an AJAX HTTP GET request
$.post() // Loads data from a server using an AJAX HTTP POST request