CODEWITHSUNDEEP
jqueryweb-applicationsmodel-view-controller
Praveen Rawat
Praveen Rawat

Reputation: 658

Calling Web Api with jquery ajax returns error

Here is my jQuery code:

$.ajax({
                url: 'http://hostedsevice.com/webapi/Masters/GetStates/',
                data: { mName: request.term},
                //contentType: 'application/json; charset=utf-8',
                dataType: 'json',
                type: 'GET',
                success: function (result) {
                    alert('');
                    if ($.isEmptyObject(result)) {
                        $('#JobStateTxt').css('border-color', '#B94A48');
                        $('#stateVal').show();
                        stateStatus = false;
                    } else {
                        $('#JobStateTxt').css('border-color', '');
                        $('#stateVal').css('display', 'none');
                        stateStatus = true;
                    }
                    response(result);
                },
                OK: function(result) {
                    alert(result);
                },
                error: function(result) {
                    alert(result);
                }
            });

and web api (which is in different project):

public async Task<HttpResponseMessage> GetStates( string mName)
    {
        HttpResponseMessage response;
        try
        {               
                SB.BusinessLayer.Common.Common objComn = new BusinessLayer.Common.Common();
                var result = objComn.GetStates(mName);
                var state = result.Select(p => new
                {
                    label = p.StateName,
                    value = p.StateId,
                    id = p.StateId
                });
                response = Request.CreateResponse(HttpStatusCode.OK, state, "json");
        }
        catch
        {
            response = Request.CreateResponse(HttpStatusCode.BadRequest);
        }
        return response;
    }

Checking with Fiddler shows records(data) return by API but in jQuery success function is never get executed, instead of that error function runs and show statusText:'error'. I cant not understand the issue here, help....

Upvotes: 1

Views: 3245

Answers (2)

David Mooch
David Mooch

Reputation: 1

I struggled a bit with this so I thought I'd add my findings. I'm not sure what version of jQuery you are using. In my case, I was upgrading from v1.12.4 to v3.4.1

I was using Ajax calls to communicate with web API. After I migrated the jquery version some of my ajax calls would successfully hit the endpoint but would always call the error callback function upon response. 

   SyntaxError: Unexpected end of JSON input
    at parse (<anonymous>)
    at Ut (jquery-3.x.x.min.js:x)
    at k (jquery-3.x.x.min.js:x)
    at XMLHttpRequest.<anonymous> (jquery-3.3.1.min.js:2)

I eventually realized that when in jQuery3.4.1 when calling a voidable endpoint...if you have explicitly stated the return type ie:

 dataType: 'JSON'

The response must match the stated type. In the above instance, it must be of type JSON. If you are calling a void endpoint. Nothing is returned and the error callback function is executed.

To fix this I did the above mention. Remove the datatype as nothing is expected back. This solved the problem for me as well. I'm still trying to figure out why this worked in v1.12.4 and when this stopped working. If anyone could add to this would appreciate it.

Upvotes: 0

Adam Marshall
Adam Marshall

Reputation: 126

I know this is late response but I had a similar problem:

I found the line dataType: 'json', from the ajax call needs to be removed.

Upvotes: 2

Related Questions