What is the reason of my jQuery.ajax() parsererror?

Question

I'm trying to get a JSON from a webservice with javascript $.Ajax call.

<script type="text/javascript">
    $(function () {
        $("#" + "@Model.BidObjectId").submit(function () {
            alert("Test");
            var param = { 'id': "@Model.BidObjectId" };
            $.ajax({
                url: "http://localhost:11523/Service1.svc/GetBidObject",
                dataType: "jsonp",
                contentType: "application/json;charset=utf-8",
                type: "GET",
                data: JSON.stringify(param),
                success: function (msg) {
                    alert("success");
                    if (msg != null) {
                        return msg.URL;
                    }
                },
                error: function (msg2) {
                    alert(msg2);
                }
            });
            return false;
        });
    });
</script>

I always go in the error scenario with a parsererror

status: 200 statusCode: function ( map ) { statusText: "parsererror"

I already read an explaination here but I cannot use JSON because this create some OPTION call. I have tried changing the POST to a GET, returning the data in a few different ways (creating classes, etc.) but I cant seem to figure out what the problem is. Only the solution with JSONP seems to be agreed to do a correct GET or POST. other solutions dont' even find my webservice.

Here is the code of my webservice:

        [OperationContract]
        [WebInvoke(Method = "GET", UriTemplate = "/GetBidObject?id={id}", RequestFormat = WebMessageFormat.Json, ResponseFormat = WebMessageFormat.Json)]
        string[] GetBidObject(string id);

with

        public string[] GetBidObject(string id)
        {
            BidObject bidobject = new BidObject() { BidObjectId = 1, Title = "callback" };

            JavaScriptSerializer ser = new JavaScriptSerializer();
            string result =  ser.Serialize(bidobject);
            List<string> listResult = new List<string>();
            listResult.Add(result);
            return listResult.ToArray(); 
        }

I don't work with ASP.NET but with Razor.

[EDIT]

If I change jsonp by json in Fiddler I can read my call is OPTIONS http://localhost:11523/Service1.svc/GetBidObject?{%22id%22:%220%22} HTTP/1.1 with chrome. In IE Fiddler detect nothing. The ajax call is never done... I really don't understand.

@cruzzea In Fiddler? The response in Fiddler is HTTP/1.1 405 Method Not Allowed. When I use JSONP everything seems correct. In Fiddler I can see my JSON under the JSON tab. — Bastien Vandamme, Jun 26 '12 at 16:27
maybe is something wrong with your server, if you access the link in your browser you will get the same response as the ajax call, and is "cuzzea", with no r — cuzzea, Jun 26 '12 at 16:30

score 0 · Accepted Answer · answered Jun 26 '12 at 16:30

0

JSON and query strings are two different things. You do not need to use JSON when sending data via GET (or POST).

$.ajax({
    url: "http://localhost:11523/Service1.svc/GetBidObject",
    dataType: "jsonp",
    type: "GET",
    data: param,
    success: function (msg) {
        alert("success");
        if (msg != null) {
            return msg.URL;
        }
    },
    error: function (msg2) {
        alert(msg2);
    }
});

jQuery will correctly serailize param and generate the URL:

http://localhost:11523/Service1.svc/GetBidObject?id=123&callback=jquery1234

Then you can just read the id value from the query string in your backend.

answered Jun 26 '12 at 16:30

gen_Eric

223,194
41
299
337

GET http://localhost:11523/Service1.svc/GetBidObject?callback=jQuery15107805854997131974_1340728690721&{%22id%22:%220%22}&_=1340728692841 HTTP/1.1 And how can I get the data back? – Bastien Vandamme Jun 26 '12 at 16:37
@DranDane: Get the data back where? What are you asking? I don't know how "webservices" work, I was just noting that your `$.ajax` call was wrong. – gen_Eric Jun 26 '12 at 16:39
My webservice return a list of string (JSON) I would like to update my page with these new data. – Bastien Vandamme Jun 26 '12 at 16:40
@DranDane: When using the `$.ajax` call from my answer, do you still get an error? What response do you get? You may need to change the webservice to read the query string correctly (as it's no longer JSON). – gen_Eric Jun 26 '12 at 16:41
I think that the data is returned in the success: function as a parameter (msg in your example) – Rick Hodder Jun 26 '12 at 16:44
@Rick My success function is never call. That is my problem. – Bastien Vandamme Jun 26 '12 at 16:45
@Rocket Response HTTP/1.1 200 OK but I still get my parsererror. Here is my raw string ["{\"BidObjectId\":1,\"Title\":\"callback\"}"] – Bastien Vandamme Jun 26 '12 at 16:51
@DranDane: You're using JSONP, right? Do you wrap the JSON in the callback? – gen_Eric Jun 26 '12 at 17:09
@Rocket I think no. What do you mean by wrap ? – Bastien Vandamme Jun 27 '12 at 07:10
@DranDane: JSONP isn't actually JSON. It's actually a JavaScript file. You need to return: `callback([{"BidObjectId": 1}])`. You need to take the value of the `callback` parameter (sent via jQuery in the query string), and use that as a function call around the JSON. jQuery will make a URL like `http://localhost:11523/Service1.svc/GetBidObject?id=123&callback=jquery1234`, so you need to return `jquery1234({"your": "json", "goes": "here"})`. – gen_Eric Jun 27 '12 at 13:30

What is the reason of my jQuery.ajax() parsererror?

1 Answers1