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:

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.

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
– Tushar, Commented Jan 17, 2016 at 10:10
Not sure, but remove JSON_PRETTY_PRINT and keep echo json_encode($erg); — Tushar
– Tushar, Commented Jan 17, 2016 at 10:11
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 ? — Philip
– Philip, Commented Jan 17, 2016 at 10:21
@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:// — Abijeet Patro
– Abijeet Patro, Commented Jan 17, 2016 at 10:26

MMK · Accepted Answer · 2016-01-17 10:45:02Z

2

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>'
}

edited Jan 17, 2016 at 10:45

answered Jan 17, 2016 at 10:18

MMK

6015 silver badges16 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

Philip Over a year ago

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 Over a year ago

Just edited the above code. It should work fine for you.

MMK Over a year ago

You will now London, Manchester and Cambridge in your html

Abijeet Patro Over a year ago

@Philip - The latest update here should work for you.

Abijeet Patro · Accepted Answer · 2016-01-17 10:31:18Z

1

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

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
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.

edited Jan 17, 2016 at 10:31

answered Jan 17, 2016 at 10:18

Abijeet Patro

2,8844 gold badges39 silver badges65 bronze badges

5 Comments

Philip Over a year ago

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 Over a year ago

@Philip - When you open the HTML file in your browser, whats the URL?

MMK Over a year ago

@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 Over a year ago

@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 Over a year ago

@AbijeetPatro thank you for the help, so now I have learned something !

Collectives™ on Stack Overflow

Error with using PHP File in javascript

2 Answers 2

4 Comments

5 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

4 Comments

5 Comments

Your Answer

Sign up or log in

Post as a guest

Related