PHP JSON: An Example Javascript JSON Client With PHP Server

While JSON has many uses, probably the most common use is to pass data structures to Javascript. JSON is simply a standard format for data structures.

In this example we’ll use a PHP page as a JSON server; we’ll use an HTML page with embedded javascript to contact the server, retrieve the data and display it via an alert popup.

A JSON Server in PHP

First, the server. Our server here is very simple, but of course it could easily retrieve data from a database. The data structure that this example sends is also very simple, but JSON can send data structures that are as complex as you like.


<?php

// Prevent caching.
header('Cache-Control: no-cache, must-revalidate');
header('Expires: Mon, 01 Jan 1996 00:00:00 GMT');

// The JSON standard MIME header.
header('Content-type: application/json');

// This ID parameter is sent by our javascript client.
$id = $_GET['id'];

// Here's some data that we want to send via JSON.
// We'll include the $id parameter so that we
// can show that it has been passed in correctly.
// You can send whatever data you like.
$data = array("Hello", $id);

// Send the data.
echo json_encode($data);

?>

Let’s imagine you run this on your local machine and access it with a URL like this: http://localhost/test.php?id=goodbye

What you get back looks like this:

["Hello","goodbye"]

Here we see some simple data in standard JSON format.

But it’s much more interesting to retrieve this data via javascript.

A Simple JSON Javascript Client

The following HTML page implements a simple javascript client that contacts our server, retrieves data via an AJAX call and displays it in an alert popup.

While you could make the AJAX call in pure unvarnished javascript, it’s much better to use a standard javascript library to hide browser and platform differences. In the following code we use the industry-standard free jQuery library, which downloads as a single file.

<html>

<head>

<script src="jquery-1.5.2.min.js"></script>

<script language="javascript">

// This just displays the first parameter passed to it
// in an alert.
function show(json) {
	alert(json);
}

function run() {
	$.getJSON(
	"/test.php", // The server URL
	{ id: 567 }, // Data you want to pass to the server.
	show // The function to call on completion.
	);
}

// We'll run the AJAX query when the page loads.
window.onload=run;

</script>

</head>

<body>

JSON Test Page.

</body>

</html>

Here’s the alert that this page pops up:

As you can see, our javascript has successfully retrieved data from the server.

jQuery also defines a more complex AJAX call routine, in case you want to check for possible failure or have a timeout or whatever.

2 Comments on PHP JSON: An Example Javascript JSON Client With PHP Server

parveen says:

May 31, 2011 at 4:43 am

I am a newbie facing a problem that in php server if i define the code in function. say I have a function sayhello() which have all the code that you defined in server n returns the message.How to call that function in client.
Please reply asap
thanks

- Squiffy says:
  
  June 10, 2011 at 6:05 am
  
  Hi Parveen,
  
  Once again I have been horrendously late in replying to a comment, apologies. I have been moving countries from the UK to Hungary, that’s my excuse ….
  
  What you need to do is pass some parameter to the PHP from your javascript (in the example I pass a parameter ‘id’ with value ’567′. Then in your PHP, check to see if the parameter has the value that signifies you want to call the function. Then run the function in PHP.
  
  I’m assuming here that you have code in your PHP that you only want to run under certain conditions.
  
  If you just want to put the above stuff in a function, all you have to do is run the function in PHP by writing myfunction() or whatever.