JQuery getJSON - ajax parseerror

I've tried to parse the following json response with both the JQuery getJSON and ajax:

[{"iId":"1","heading":"Management Services","body":"<h1>Program Overview</h1><h1>January 29, 2009</h1>"}]

I've also tried it escaping the "/" characters like this:

[{"iId":"1","heading":"Management Services","body":"<h1>Program Overview <\/h1><h1>January 29, 2009<\/h1>"}]

When I use the getJSON it dose not execute the callback. So, I tried it with JQuery ajax as follows:

$.ajax({
    url: jURL,
    contentType: "application/json; charset=utf-8",
    dataType: "json",
    beforeSend: function(x) {
        if(x && x.overrideMimeType) {
            x.overrideMimeType("application/j-son;charset=UTF-8");
        }
    },
    success: function(data){
        wId = data.iId;
        $("#txtHeading").val(data.heading);
        $("#txtBody").val(data.body);
        $("#add").slideUp("slow");
        $("#edit").slideDown("slow");
    },//success
    error: function (XMLHttpRequest, textStatus, errorThrown) {
        alert("XMLHttpRequest="+XMLHttpRequest.responseText+"\ntextStatus="+textStatus+"\nerrorThrown="+errorThrown);
    }
});

The ajax hits the error ans alerts the following:

XMLHttpRequest=[{"iId":"1","heading":"Management Services","body":"<h1>Program Overview </h1><h1>January 29, 2009</h1>"}]

textStatus=parseerror

errorThrown=undefined

Then I tried a simple JQuery get call to return the JSON using the following code:

$.get(jURL,function(data){
    var json = eval("("+data+");");
    wId = json.iId;
    $("#txtHeading").val(json.heading);
    $("#txtBody").val(json.body);
    $("#add").slideUp("slow");
    $("#edit").slideDown("slow");
})

The .get returns the JSON, but the eval comes up with errors no matter how I've modified the JSON (content-type header, other variations of the format, etc.)

What I've come up with is that there seem to be an issue returning the HTML in the JSON and getting it parsed. However, I have hope that I may have missed something that would allow me to get this data via JSON. Does anyone have any ideas?

The JSON string you have is an array with 1 object inside of it, so to access the object you have to access the array first. With a json.php that looks like this:

[
    {
        "iId": "1",
        "heading": "Management Services",
        "body": "<h1>Program Overview</h1><h1>January 29, 2009</h1>"
    }
]

I just tried this

$.getJSON("json.php", function(json) {
    alert(json[0].body); // <h1>Program Overview</h1><h1>January 29, 2009</h1>
    alert(json[0].heading); // "Management Services"
    alert(json[0].iId); // "1"
});

I also tried this:

$.get("json.php", function(data){
    json = eval(data);
    alert(json[0].body); // <h1>Program Overview</h1><h1>January 29, 2009</h1>
    alert(json[0].heading); // "Management Services"
    alert(json[0].iId); // "1" 
});

And they both worked fine for me.

If anyone is still having problems with this it's because your response needs to be a JSON string and content-type "application/json".

Example for HTTP in asp.net (c#):

public void ProcessRequest(HttpContext context)
    {
        context.Response.ContentType = "application/json";
        context.Response.Write("{ status: 'success' }");
    }

hth,

Matti

Did you try XML-encoding the HTML (i.e. <H1>)?

You could have it return as text and then parse it with the json.org parser
To see if it works any differently

Pleas note that in the question there is a syntax error. The line with

x.overrideMimeType("application/j-son;charset=UTF-8");

should read

x.overrideMimeType("application/json; charset=UTF-8");

This makes a big difference too.

Remove the [], on front and last on JsonData, and it work.

Lynn Dylan Hurley

Disabling Firebug Lite fixed this problem for me.

Bug with combination of: jQuery 1.4, ajax/json, Firebug Lite and IE 8

This is a working example and tested!

<script type="text/javascript">

function fetchData() {
var dataurl = "pie.json";
$.ajax({
    url: dataurl,
    cache: false,
    method: 'GET',
    dataType: 'json',
    success:  function(series) {
        var data = [];
        //alert(series.length);
        for (var i=0; i<series.length;i++){
            data[i]=series[i];
        }

        $.plot(
                $("#placeholder"), 
                data, 
                {
                     series: {
                       pie: {
                         show: true,
                         label: {
                           show: true
                         }
                     }
                    },
                    legend: {
                      show: true
                    }
                  }
       );
     }
});

   //setTimeout(fetchData, 1000);
}
</script>

And the json source is the following (pie.json):

[{ "label": "Series1",  "data": 10},
{ "label": "Series2",  "data": 30},
{ "label": "Series3",  "data": 90},
{ "label": "Series4",  "data": 70},
{ "label": "Series5",  "data": 80},
{ "label": "Series6",  "data": 110}]

First, try to pinpoint if the problem is with general JSON encoding/decoding. try simpler objects, with numbers and plain strings, then with quoted HTML.

After you get JSON working, you really should really consider removing the HTML from there. Much better is to move just data, and leave presentation details to the templates. When using AJAX, that means a hidden template in the HTML, and use jQuery to replicate it and fill with the data. check any of the jQuery template plugins. Of these, jTemplates is a common favorite.

I think you are asking wrong question. Using $.getJSON() is much easier, and if you got problem with it, would be better to ask for $.getJSON() than for $.ajax(). You might also find useful looking at getJSON function source code, because I see, you got a lot of useless stuff there with mimeTypes. That's not the way.

The value you are trying to parse is wrapped in brackets [], which means it is an array. You are trying to eval an array. Try to eval the first element of the array, and it should work...

var json = eval("("+data[0]+");");

Also, I would recommend using the JSON.parse() provided here instead of calling eval() directly.

I received a similar error. Took me a while to find out - little did I know that PHP has not (natively) supported JSON since PHP5.2. Critical reminder...

Yesterday at $. Ajax still no mistakes, today is quoted the mistake, some say parsererror jquery version of the problem, what I use is jquery-1.3.2.min.js, yesterday. This edition also done, today is washed-up. Data sources: no change. Don't know what reason be?

It is maybe because your output buffer is not empty, so AJAX receive bytes which don't belong to the JSON.

Try clean buffer with ob_clean() on server side just before output your json with echo or die(). And you don't need to specify contentType, I think for you default value will work correctly.

I had the same problem and it solve it.

Hope to help you.

Jorge Olivares

in my case, the error was caused by a html tag in the json.

INCORRECT (parsererror)

{"msg": "Gracias,< br >Nos pondremos en contacto."}

CORRECT

{"msg": "Gracias, nos pondremos en contacto."}

BROWSER: IE7/IE8

also try this

$.ajax({
    url: url,
    data:datas,
    success:function(datas, textStatus, jqXHR){
    var returnedData = jQuery.parseJSON(datas.substr(datas.indexOf('{')));
})};

in my case server responds with unknow character before '{'

Don't use an array box, and make sure you format your data properly:

{"account":{"iId":"1","heading":"Management Services","body":"<h1>Program Overview</h1><h1>January 29, 2009</h1>"}}

来源：https://stackoverflow.com/questions/631418/jquery-getjson-ajax-parseerror

标签

javascript

jquery

ajax

json

eval