retrieve json file from server - ajax

Question

I am trying to get a json file from my server. Until now, always I need a json file, it was got by ajax and a php file in server creates the json file.
Not I have a json file (X.json) with this structure:
{
"zona": [
{
"zona1": [
{
"lon": "a",
"lat": "b"
},
{
"lon": "aa",
"lat": "bb"
},
{
"lon": "aaa",
"lat": "bbb"
},
{
"lon": "aaaa",
"lat": "bbbb"
}
]
},
{
"zona2": [
{
"lon": "c",
"lat": "d"
},
{
"lon": "cc",
"lat": "dd"
},
{
"lon": "ccc",
"lat": "ddd"
},
{
"lon": "cccc",
"lat": "dddd"
},
{
"lon": "ccccc",
"lat": "ddddd"
}
]
}
]
}
And when I try the same way to get the file, I didn't get anything. I think maybe it is possible to add the file when I load the webpage like a javascript file. Or maybe with jsonp but I trid and also I got bad answer.
As json try, I used:
$.ajax({
url: 'localhost/open/listaPuntosZona.json',
type: 'GET',
data: "{}",
contentType: "application/json; charset=utf-8",
dataType: "jsonp",
jsonp: "callback",
jsonpCallback: "jsonpCallbackfunction",
error: function () {
alert("Error in Jsonp");
}
});
function jsonpCallbackfunction(responseData) {
alert(responseData);
}
Also I wrapped json file with: callback( jsonfile code)
And also, this other two tries:
$.ajax({
url: 'localhost/open/listaPuntosZona.json',
type: 'get',
error: function(data){ },
complete: function(data){
data=jQuery.parseJSON(data); //do something with data
alert(data.zona.zona1.length);
}
});
$.getJSON('localhost/open/listaPuntosZona.json',function(jsonData){
alert("hola");
alert(jsonData);
});
I am using lampp to test the webpage.
Do I have to change something? I used jsonp in past but don't know what I am doing wrong now.

Answer 1

First of all, try using $.getJSON() instead of plain $.ajax(). it will solve many problems right off the bat.
http://api.jquery.com/jQuery.getJSON/
Secondly, make sure your json file is formatted perfectly, without any loose characters and strange whitespaces.
Also try to chain an error handler to your ajax call. available in the getJSON documentation above.
var jqxhr = $.getJSON("example.json").error(function() { alert("error"); });
// this is according to documentation, i cannot currently test this to work, sorry about that.

Answer 2

I know this is old but in case someone else has this issue like I did, here is how I was able to fix it...
Add the following line to the .htaccess file...
Header set Access-Control-Allow-Origin "*"