A Quick JSONP Example

Aug 25, 2013 00:00 · 379 words · 2 minute read Javascript

Sometimes when people write out their blog posts they forget to proof it for validation. I had a dandy time trying to get a form to submit via JSONP so I kept trying tutorials and I found one that I thought should work but didn’t because the guy who wrote it didn’t spellcheck it. I got the example working and I thought to save frustration next time I ever have to do this that I would write this out quickly. First off JSONP is JSON but with the ability to go cross domain. The setup from regular JSON is similiar and I will post both just so that I have the reference for them. First off JSON:

$.ajax({ //ajax call starts
type: "POST",
url: 'api/api.php', //Jquery loads api.php
data: $('#loginForm').serialize(), //sending the paramaters of the form
dataType: 'json', //choosing a JSON datatype
success: function(data){
//Do stuff with the data object
},
error: function(XMLHttpRequest, textStatus, errorThrown){
//Alert or console log some errors
}
});

And now JSONP:

$.ajax({ //ajax call starts
url: 'http://webaddress/somefile.php?callback=?', //Jquery loads api.php
data: $('#loginForm').serialize(), //send value of the button clicked
dataType: 'jsonp', //choosing a JSON datatype
jsonp: "callback",
jsonpCallback: "returnJson"
})

function returnJson(rtndata){
console.log("Return Data As follows");
console.log(rtndata);

You have to declare your own callback function that will be called. The server part is a similar in both cases. You use POST in JSON and GET with JSONP and the function json_encode(“return data”) to return information back. The php for JSONP must include the line “header(‘Content-Type: application/json’);”. First the JSON server. postAction = (isset($_POST[‘action’]) ? $_POST[‘action’] : null); if($postAction == ‘login’){ echo json_encode(“I got the action variable”); } else { echo json_encode(“There was a problem”); } And now the JSONP Server Example:

header('Content-Type: application/json');
if (isset($_GET['id'])){
	$rtnjsonobj->id = $_GET['id'];
}
$rtnjsonobj->message = "You got an AJAX response via JSONP from another site!";
echo $_GET['callback']. '('. json_encode($rtnjsonobj) . ')';

I should mention my examples aren’t the best but I wanted to use the working code so that I knew the examples would work. With these few examples you should be able to fulfill all your JSON/JSONP requirements. You can also use the $.getJSON method as well like the following:

$.getJSON("http://genie/api/api.php?id=1&callback=?",
	function(data){ console.log(data.message) }
)

This will work as well I just prefer to use the json method.