Rectangle 27 0

Simple jQuery, PHP and JSONP example?


//JAVASCRIPT

$.getJSON('http://www.write-about-property.com/jsonp.php?callback=?','firstname=Jeff',function(res){
    alert('Your name is '+res.fullname);
});

//SERVER SIDE
  <?php
 $fname = $_GET['firstname'];
      if($fname=='Jeff')
      {
          //header("Content-Type: application/json");
         echo $_GET['callback'] . '(' . "{'fullname' : 'Jeff Hansen'}" . ')';

      }
?>

And what about the server-sided part of the story? :)

If you look at the source code you can see that I am calling the Twitter API using .getJSON.

Note the ?callback=? and +res.fullname

So your example would be: THIS IS TESTED AND WORKS (You can go to http://smallcoders.com/javascriptdevenvironment.html to see it in action)

never echo a user provided parameter without sanitizing!

Note
Rectangle 27 0

Simple jQuery, PHP and JSONP example?


echo "{'fullname' : 'Jeff Hansen'}";
echo $_GET['callback'] . '(' . "{'fullname' : 'Jeff Hansen'}" . ')';
echo $_GET['callback'] . '(' . $data . ')';

As I said your data has to be wrapped into a Javascript function. Liam's example won't work. The actual response should look like this: callbackFunction({"fullname": "Jeff Hansen"})

At the server side you've got to make sure that your data is wrapped in this callback function.

First of all you can't make a POST request using JSONP.

Furthermore your data has to be wrapped in a callback function which is called after the request is finished to load the data in a variable.

I am choking on the last part - why are you doing the '('.$data...?

Sorry, but you are wrong, yes you need the ?callback= on the url, but if you just make it ?callback=? you can send your data in JSON in the second parameter. I know because I have done it.

This whole process is automated by jQuery for you. Just using $.getJSON on an external domain doesn't always work though. I can tell out of personal experience.

What basically is happening is that dynamically a script tag is inserted to load your data. Therefore only GET requests are possible.

You are right, I apologise. I had changed the code to curly braces but had not added the file to the server. Parenthesis works, curly braces doesn't. Answer updated.

You can send it, but you can't receive it without adding the wrapper callback function. EDIT: You're talking about the client-side in jQuery, but I'm talking about the server-side in PHP which needs adjusting.

with

Note
Rectangle 27 0

Simple jQuery, PHP and JSONP example?


$.ajax({
        url: "http://FullUrl",
        dataType: 'jsonp',
        success: function (data) {

            //Data from the server in the in the variable "data"
            //In the form of an array

        }

});
<?php

$array = array(
     '0' => array('fullName' => 'Meni Samet', 'fullAdress' => 'New York, NY'),
     '1' => array('fullName' => 'Test 2', 'fullAdress' => 'Paris'),
);

if(isset ($_GET['callback']))
{
    header("Content-Type: application/json");

    echo $_GET['callback']."(".json_encode($array).")";

}
?>
Note
Rectangle 27 0

Simple jQuery, PHP and JSONP example?


$array = array(
    'fullname' => 'Jeff Hansen',
    'address' => 'somewhere no.3'
);
echo $_GET['callback']."(".json_encode($array).")";
echo $_GET['callback']."([{'fullname' : 'Jeff Hansen'}])";

The question was regarding JSONP which requires the server's response to be wrapped with the client-callback and brackets e.g. callback123([{a:1}])

To make the server respond with a valid JSONP array, wrap the JSON in brackets () and preprend the callback:

Using json_encode() will convert a native PHP array into JSON:

Note
Rectangle 27 0

Simple jQuery, PHP and JSONP example?


$.ajax({
        url: "http://FullUrl",
        dataType: 'jsonp',
        success: function (data) {

            //Data from the server in the in the variable "data"
            //In the form of an array

        }

});
<?php

$array = array(
     '0' => array('fullName' => 'Meni Samet', 'fullAdress' => 'New York, NY'),
     '1' => array('fullName' => 'Test 2', 'fullAdress' => 'Paris'),
);

if(isset ($_GET['callback']))
{
    header("Content-Type: application/json");

    echo $_GET['callback']."(".json_encode($array).")";

}
?>
Note