Differentiate between HTTP request and Ajax request

Question

I am currently working on ASP.NET WebApi and Angularjs

WebApi have a method

 [System.Web.Http.AcceptVerbs("POST")]
        [System.Web.Http.HttpPost]
        public HttpResponseMessage SearchAddress(SearchDetails searchDetail)
        {
            //13.03993,80.231867
            try
            {
                if (!WebSecurity.IsAuthenticated)
                {
                    HttpResponseMessage response = Request.CreateResponse(HttpStatusCode.NotAcceptable);
                    return response;
                }
                List<CollegeAddress> CollegeAddress = addressService.GetAddressFromDistance(17.380498, 78.4864948, 2000);
                HttpResponseMessage responseData = Request.CreateResponse(HttpStatusCode.Accepted, CollegeAddress);
                return responseData;
            }
            catch (Exception e)
            {
                HttpResponseMessage response = Request.CreateResponse(HttpStatusCode.NotFound);
                return response;
            }
        }

And I have to call this method from client side.

When I call this method using Ajax, it's not working, the method parameter searchDetail is always null if I use Ajax.

$.ajax({
            method: 'POST',
            url: rootUrl + '/api/Address/SearchAddress',
            async: false,
            data: searchDetail,
            type: "json",
            headers: {
                'Content-Type': "application/json; charset=utf-8"
            }
        }).success(function (response) {
            return response;

        }).error(function () {
            toastr.error('Somthing is wrong', 'Error');
        })

But when I call that method via HTTP request, it is working.

 $http({
            method: 'POST',
            url: rootUrl + '/api/Address/SearchAddress',
            data: searchDetail,
            headers: {
                'Content-Type': "application/json; charset=utf-8"
            }
        }).success(function (response) {
            toastr.success('Account Created successfully!', 'Account Created');
            return response;
        }).error(function () {
            toastr.error('Somthing is wrong', 'Error');
        })

Why? What is the difference between them? Why is Ajax not working and HTTP is?

Answer 1

jQuery's ajax() sends the data with Content-type: x-www-form-urlencoded.
Angular's $http sends the data with Content-type: application/json

Your server obviously expects JSON, but you set up the $.ajax() call incorrectly for that.

According to the docs:

• The method property doesn't seem to exist.
• The type property is supposed to determine the type of the request (e.g. 'GET', 'POST', etc.).
• In order to change the default content-type to application/json you can use the contentType property.

---

I have not tried it myself, but something like this should work:

$.ajax({
  type: 'POST',
  url: rootUrl + '/api/Address/SearchAddress',
  async: false,
  data: searchDetail,
  contentType: 'application/json; charset=utf-8'
});

Answer 2

$.ajax({
        method: 'POST',
        url: rootUrl + '/api/Address/SearchAddress',
        async: false,
        data: searchDetail,

I assume that searchDetail is an object. This is what the docs say about the data property:

... It is converted to a query string, if not already a string.

So if the server expects JSON then you have to convert it to JSON first:

data: JSON.stringify(searchDetail),

And as @ExpertSystem has pointed out you have to change method to type.

Answer 3

First you are duplicating the HttpPost, so just keep the second (and remove the namespace) Second you want search detail to come from the body so decorate it with [FromBody]

    [HttpPost]
    public HttpResponseMessage SearchAddress([FromBody]SearchDetails searchDetail)
    {