Jquery Ajax call and simple PHP json string echo server - php

Question

My PHP code on Xampp
<?php
$data = ((**Refer the JS fiddle Link below for JSON data**));
//header('Content-Type: application/json');
echo $data;
?>
my client Javascript code
function clickbtn(){
$.ajax({
url: 'http://localhost/json/index.php',
type: 'GET',
contentType:'json',
//data: JSON.stringify(data),
success:function(dataF){
console.log('SuccessMsg:'+dataF);
alert(dataF.surveyId);
},
error:function(){
alert('Error: Unable to connect to the server');
}
});
}
I am able to dump the JSON from the php server on my browser console. But i am unable to see the alert "SurveyID" value on alert box.
Kindly take the JSON data available in JS fiddle link and paste it in your PHP script and test it.
If you are testing on chrome Please add the ((Chrome installation path))--disable-web-security to allow cross domain origin policy and then run the JSfiddle link at your end.
JSfiddle for client JS and PHP JSON data

Answer 1

You should use the dataType option instead of contentType if you need the response to be JSON parsed automatically by jQuery.
$.ajax({
url: 'http://localhost/json/index.php',
type: 'GET',
dataType:'json', /* dataType instead of contentType */
...
success:function(dataF){
console.log('SuccessMsg:'+dataF);
alert(dataF.surveyId);
},
...
});

Answer 2

Sometimes jQuery (or the browser?) respone with a string instead of an object.
You have to ckeck this an parse it to json maybe. I've encountered this problem too often, so i' checking this every time.
function clickbtn(){
$.ajax({
url: 'http://localhost/json/index.php',
type: 'GET',
success:function(dataF){
console.log('SuccessMsg:'+dataF);
if(typeof dataF != 'object')
{
dataF = jQuery.parseJSON(dataF);
}
alert(dataF.surveyId);
},
error:function(){
alert('Error: Unable to connect to the server');
}
});
}
I think that the dataType parameter is sometimes ignored :(