Error with using PHP File in javascript

Question

I have the following problem. I have a PHP File, which should give me a JSON Object so I can display it in my HTML File. This works perfectly, I receive a output, which looks like a JSON Object, but although I will post the PHP File here:

 <?php
 header('Content-Type: application/json');
 $erg = array (
 "London" => array(
 "Wetter" => "Regnerisch", 
 "Grad" => 12
 ),
 "Manchester" => array(
 "Wetter" =>"Sonnig", 
 "Grad" => 15
 ),
 "Cambridge" => array(
 "Wetter" => "Bewoelkt",
 "Grad" => 5
 )
 );
 echo json_encode($erg, JSON_PRETTY_PRINT); 
?>

I have read something about $.ajax, but I don ́t know if I can use it like this:

$(document).ready(function() {
 var newHtml;
 $.ajax({
 url: 'Server2.php',
 type: 'get',
 cache:false,
 success: function(json) {
 $.each(json,function(i, item) {
 newHtml += '<div>' + item.Wetter + '</div>'
 })
 $('#inhalt').html(newHtml);
 }
 });
});

But when I try to display it in the browser, I receive the following error:

enter image description here

So I want just to display the output of the PHP File in a div, which I insert into my div with the id inhalt in my HTML document.

I appreciate every help from you guys.

• Tushar: Two ways to solve problem: 1. Use dataType: 'json', in $.ajax conf. options. 2. Use var jsonObj = JSON.parse(json); in the success callback and use jsonObj.
• Tushar: Not sure, but remove JSON_PRETTY_PRINT and keep echo json_encode($erg);
• Philip: First of all thank you, it helped me a bit, but do you know, why I receive this error message: Uncaught SyntaxError: Unexpected token : in my php File at line 2 ?
• Abijeet Patro: @Tushar - JSON_PRETTY_PRINT shouldn't cause any issues, I think the OP's problem is that he is seeing the entire PHP file on the client side...which makes me wonder if he is opening the html file via http or file://

Answer 1

Just tested this code. Try this code for the jQuery part:

$(document).ready(function() {
 var newHtml;
 $.ajax({
 type: 'GET',
 dataType: 'json',
 url: 'Server2.php',
 complete: function( json ){
 //$.each( json.responseJSON, function(i, item) {
 // newHtml += '<div>' + item.Wetter + '</div>'
 //});
 // Try this for the keys
 for(var key in json.responseJSON) {
 newHtml += '<div>' + key + '</div>'
 }
 $( '#inhalt' ).html( newHtml );
 }
 });
});

More Info

if you want to get the key and the Wetter key for each location then try this

for(var key in json.responseJSON ) {
 var wetter = json.responseJSON[ key ].Wetter,
 grad = json.responseJSON[ key ].Grad;
 // You can now use the wetter and grad vars wherever you want inside this function
 newHtml += '<div>' + key + '</div>'
}

• Philip: It worked fine, so now I can handle item.Wetter and item.Grad but I don´t receive London, Manchester and Cambridge, do you know, how I can handle this problem ?
• MMK: Just edited the above code. It should work fine for you.
• MMK: You will now London, Manchester and Cambridge in your html
• Abijeet Patro: @Philip - The latest update here should work for you.

Answer 2

I see that the ajax response contains the entire PHP file, this means there could one of the two possible issues here -

1. It seems like you're not running the html file via apache. What's the URL in your browser? Does it start with file://C:/www/html/test.html, if so you should load that file via Apache, so should be something like http://localhost/test.html

2. Apache is not parsing PHP files, in which case you need the php module installed. You might want to install/enable the php module but since you said the response is being received, I'd say you have it installed.

Can you tell me what URL you are typing to access the html page in the browser? In addition please check the Network tab in Chrome to see the AJAX call in realtime.

• Philip: I run the entire project with xampp, now I receive a output with item.Wetter and item.Grad, but I don´t get London, Manchester and Cambridge, do you know, how I can handle this problem ?
• Abijeet Patro: @Philip - When you open the HTML file in your browser, whats the URL?
• MMK: @Philip, your php is good but you'll have to change your javascript for you to get the correct London, Manchester and Cambridge response and the html.
• Abijeet Patro: @Philip - Please check the response that you receive on the client side. You can see this in the network tab of the chrome browser. This will give us the exact response that you get. I think the JSON is in the raw format and not parsed by jQuery. Check my updated answer.
• Philip: @AbijeetPatro thank you for the help, so now I have learned something !