Help with PHP/JSON/Ajax

xdaman · 20th June 2012, 9:17 PM

Hi all,

Just trying to prototype something for a web app I want to make. Effectively I want the PHP to act as an API that returns json.

A HTML page will be served up that will make a call to the PHP, I want the PHP to return a JSON object for the JavaScript to manage.

Code:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>Prototype</title>
</head>
<body>
<button id="test">Test</button>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"></script>
<script>
    $(document).ready(function(){
        $("#test").click(function(){

            $.ajax({
                url: 'http://localhost/index.php',
                type: "POST",
                dataType: "json",
                success: function(data, data2, data3) {
                    console.log("test", data, data2, data3);
                },
                error: function(error) {
                    console.log("error", error)
                }
            })

        });
    });
</script>
</body>
</html>

PHP Code:


			
<?php

$arr = array('a' => 1, 'b' => 2, 'c' => 3, 'd' => 4, 'e' => 5);



header('Content-Type: text/javascript; charset=utf8');

header('Access-Control-Allow-Origin: http://www.example.com/');

header('Access-Control-Max-Age: 3628800');

header('Access-Control-Allow-Methods: GET, POST, PUT, DELETE');



$json= json_encode($arr); 

print_r($json); 



?>

Visiting the PHP shows this:

Code:

{"a":1,"b":2,"c":3,"d":4,"e":5}

Making the call via the AJAX returns a 200 OK but calls the error callback:
error Object { readyState=0, status=0, statusText="error"}

Wako · 21st June 2012, 1:23 AM

slapped it on my dev box
worked fine for me.

http://littleman/temp/aj.html
was your ajax page

I only changed it to point to your php code to where it resided on my box
http://littleman/temp/index.php

xdaman · 21st June 2012, 1:34 PM

Those URL's aren't valid...

rm -rp ./Matt* · 21st June 2012, 2:23 PM

your ajax call is wrong, also refer to a newer jquery version, I believe it's up to 1.7, Chrome was spitting errors about this one. I'm not sure about your error code, I haven't had use for those yet. I set the type to GET because you aren't sending any data to php to process you're just grabbing static data.

Code:

$(document).ready(function(){
        $("#test").click(function(){

            $.ajax({
                url: 'http://localhost/index.php',
                type: "GET",
                dataType: "json",
		cache: false,
                success: function(data) {
                    console.log("test", data.a, data.b, data.c);
                },
                error: function(error) {
                    console.log("error", error)
                }
            })
        });
    });

20th June 2012, 9:17 PM	#1
xdaman Member Join Date: May 2004 Location: Banksia Park, SA Posts: 434	Help with PHP/JSON/Ajax Hi all, Just trying to prototype something for a web app I want to make. Effectively I want the PHP to act as an API that returns json. A HTML page will be served up that will make a call to the PHP, I want the PHP to return a JSON object for the JavaScript to manage. Code: <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <title>Prototype</title> </head> <body> <button id="test">Test</button> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"></script> <script> $(document).ready(function(){ $("#test").click(function(){ $.ajax({ url: 'http://localhost/index.php', type: "POST", dataType: "json", success: function(data, data2, data3) { console.log("test", data, data2, data3); }, error: function(error) { console.log("error", error) } }) }); }); </script> </body> </html> PHP Code: `<?php $arr = array('a' => 1, 'b' => 2, 'c' => 3, 'd' => 4, 'e' => 5); header('Content-Type: text/javascript; charset=utf8'); header('Access-Control-Allow-Origin: http://www.example.com/'); header('Access-Control-Max-Age: 3628800'); header('Access-Control-Allow-Methods: GET, POST, PUT, DELETE'); $json= json_encode($arr); print_r($json); ?>` Visiting the PHP shows this: Code: {"a":1,"b":2,"c":3,"d":4,"e":5} Making the call via the AJAX returns a 200 OK but calls the error callback: error Object { readyState=0, status=0, statusText="error"} __________________ Over $10,000 worth bought, $15,000 sold through forums

21st June 2012, 1:23 AM	#2
Wako Member Join Date: Jun 2006 Posts: 472	slapped it on my dev box worked fine for me. http://littleman/temp/aj.html was your ajax page I only changed it to point to your php code to where it resided on my box http://littleman/temp/index.php __________________ CHIPS

21st June 2012, 1:34 PM	#3
xdaman Member Join Date: May 2004 Location: Banksia Park, SA Posts: 434	Those URL's aren't valid... __________________ Over $10,000 worth bought, $15,000 sold through forums

21st June 2012, 2:23 PM	#4
rm -rp ./Matt* Member Join Date: Sep 2008 Location: in the computer Posts: 621	your ajax call is wrong, also refer to a newer jquery version, I believe it's up to 1.7, Chrome was spitting errors about this one. I'm not sure about your error code, I haven't had use for those yet. I set the type to GET because you aren't sending any data to php to process you're just grabbing static data. Code: $(document).ready(function(){ $("#test").click(function(){ $.ajax({ url: 'http://localhost/index.php', type: "GET", dataType: "json", cache: false, success: function(data) { console.log("test", data.a, data.b, data.c); }, error: function(error) { console.log("error", error) } }) }); });