PHP, JSON and JavaScript usage

Thursday, July 17th, 2008

Today i want to introduce you to jSON (JavaScript Object Notation), in short, it is a simple format designed to exchange data between different programming languages. I will show you how to create JavaScript object, convert it to JSON string, and send to PHP script, which will decode jSON string to readable format (for PHP). But that’s not all, PHP script will create it’s own data object encode it to jSON string and send it back. All communication between JavaScript and PHP will be done thru AJAX.

Learn Faster!
Get instant access to exclusive: source codes, resources and more, for THIS and other tutorials for $5 a month.

If you haven’t heared about jSON yet, then you can visit Wikipedia for more information. The other technology you need to be familiar with before reading this article is AJAX. If you need to, you can read my Introduction to AJAX post.

JSON objects

Usually when it comes to JSON we have an encoded string in mind, however JSON is a subset of JavaScript and in this programming language it can be used as is, to create objects. Simple JavaScript object created using JSON notation can look like this:

var JSONstring = 
{
    "firstname": "Greg", 
    "email": "greg@fake_email.com",
    "hobby": 
    [
	{
	    "hobbyName": "sport", 
            "isHobby": "true"
	},
        {
		"hobbyName": "reading", 
	        "isHobby": "true"
	},
        {
		"hobbyName": "music", 
	        "isHobby": "false"
	}
    ]
};

Accessing fields is done like in any other JS object (mainly because it is “normal” JavaScript object), if we want to know if hobby “reading” was checked then we would have to write:

JSONstring.hobby[1].isHobby; // true

Creating JavaScript Objects

Before we start, we will need something to work with. We will create HTML form with “validate” button, when someone clicks this button the whole proccess i described in the first paragraph will start. Also, despite JSON is a subset of JavaScript there are no built in function for converting JavaScript object into JSON string, so we will use already created class available at JSON homepage, the file is located here json2.js.

Here is the code for the HTML form, i think there is no need to explain it:

</script>
<html>
<head><TITLE>ditio.net jSon Tutorial</TITLE>
<script src="http://www.json.org/json2.js"></script>
<script>
// JavaScript source code will be here
</head>
<body>
<form name="personal" action="" method="POST">
Name <input type="text" name="firstname"><br>
Email <input type="text" name="email"><br>
Hobby 
	<input type="checkbox" name="hobby" value="sport"> Sport
	<input type="checkbox" name="hobby" value="reading"> Reading
	<input type="checkbox" name="hobby" value="music"> Music
<input type="button" name="valid" value="Validate" onclick="validate()">
</form>
</body>
</html>

After clicking “validate” button validate() function will be called, we need to add it, in head section for example:

function validate()
{
    var p = document.forms['personal'];
 
    var JSONObject = new Object;
    JSONObject.firstname = p['firstname'].value;
    JSONObject.email = p['email'].value;
    JSONObject.hobby = new Array;
 
    for(var i=0; i<3; i++)
    {
        JSONObject.hobby[i] = new Object;
	JSONObject.hobby[i].hobbyName = p['hobby'][i].value;
	JSONObject.hobby[i].isHobby = p['hobby'][i].checked;
    }
 
    JSONstring = JSON.stringify(JSONObject);
    runAjax(JSONstring);
 
}

Code is quite easy to understand. First i assign whole form to variable p just to make further access to this form data easier. In next lines JavaScript object is created, as you can see it consists only from Object and Array data objects.

Note that this is completely the same object as in first listing of this tutorial, however different method was used to create it.

Sending JSON object to PHP with AJAX

I do not want ot get into AJAX here because it is not the topic of this tutorial, i will use code from my Introduction to AJAX post, if you do not want ot go there then remember that at the end of this article there is whole source code waiting to be downloaded.

var request;
function runAjax(JSONstring)
{
    // function returns "AJAX" object, depending on web browser
    // this is not native JS function!
    request = getHTTPObject();
    request.onreadystatechange = sendData;
    request.open("GET", "parser.php?json="+JSONstring, true);
    request.send(null);
}
 
// function is executed when var request state changes
function sendData()
{
    // if request object received response
    if(request.readyState == 4)
    {
	// parser.php response
	var JSONtext = request.responseText;
	// convert received string to JavaScript object
	var JSONobject = JSON.parse(JSONtext);
 
	// notice how variables are used
	var msg = "Number of errors: "+JSONobject.errorsNum+
		"\n- "+JSONobject.error[0]+
		"\n- "+JSONobject.error[1];
 
	alert(msg);
    }
}

That’s it we are half way there, now we need to create PHP script to handle AJAX request.

JSON and PHP

Decoding JSON string is very simple with PHP only one line of code is needed to parse string into object. Similary only one function is needed to encode PHP object or array into JSON string, look at the code:

<?php
 
// decode JSON string to PHP object
$decoded = json_decode($_GET['json']);
 
// do something with data here
 
// create response object
$json = array();
$json['errorsNum'] = 2;
$json['error'] = array();
$json['error'][] = 'Wrong email!';
$json['error'][] = 'Wrong hobby!';
 
// encode array $json to JSON string
$encoded = json_encode($json);
 
// send response back to index.html
// and end script execution
die($encoded);
 
?>

It is also interesting what is inside $decode variable

stdClass Object
(
    [firstname] => fgfg
    [email] => 
    [hobby] => Array
        (
            [0] => stdClass Object
                (
                    [hobbyName] => sport
                    [isHobby] => 1
                )
 
            [1] => stdClass Object
                (
                    [hobbyName] => reading
                    [isHobby] => 
                )
 
            [2] => stdClass Object
                (
                    [hobbyName] => music
                    [isHobby] => 
                )
 
        )
)

PHP finished execution, then “request” object status in JavaScript is now equal to 4. Response text (in sendData() function) will be parsed with JSON class to object and used to display message on the screen. Note that instead of using JSON.parse() we could use JavaScriipt eval() function.

Conclusion

This tutorial was intended to introduce you to JSON, and i wanted to make this tutorial as clear as possible so i intentionally used the simplest methods to achieve my goal. However this tutorial wouldn’t be complete if i wouldn’t give you further resources from which you can learn more.

First you should check out is Zend_Json class (a part of Zend Framework), it has the same functionality as json_decode() and json_decode(), but can handle more complicated JSON strings then those two functions.

Second is json.org home of JSON, check especially this tutorial, it has got great examples of more advanced JSON class usage.

tagged under: ...

ABOUT THIS AUTHOR


Greg
  1. bbb
    July 19, 2008 at 5:39 pm

    That was easy to follow through.
    Thanks!

  2. chris
    August 2, 2008 at 4:36 am

    Nice tutorial. I do have one question though. I tried processing the JSON (as passed from my php remote script) in a javascript function, but it hasn’t worked. The js function treats the returned value as text instead of a json object. Any ideas?

    function helloCallback(data,ioArgs) {
    var obj = data; // where data is a json_encode() string from php
    }

  3. Greg
    August 2, 2008 at 7:53 am

    Hi Chris thanks for your comment.

    Actually you are receiving string and that is OK, now you need to parse it to JavaScript object:
    var JSONobject = JSON.parse(data);
    or
    var JSONobject = eval(data);

    second example will work always, the first one only if you are using json2.js

    Hope that helps.

  4. Charles
    October 18, 2008 at 9:02 am

    Hiii….. This tutorial is awesome and it will be useful for many people. Everything is fantastic here but please keep the bookmarking button here so that it can promote your site at the same time many will bookmark ( including me :)

  5. Greg
    October 19, 2008 at 7:11 am

    Hi Charles, i was using bookmarking buttons, but no one seemed to be interested in clicking them so eventually i decided to remove them as they were just wasting space.

    However maybe i will consider placing here one button that will allow to bookmark pages.

  6. Mandy
    November 29, 2008 at 1:59 am

    Thanks, very handy. I’m using JSON now with the jQuery form plugin:

    http://malsup.com/jquery/form/#code-samples

    Cheers,

    Mandy

  7. sanjay
    March 17, 2009 at 2:49 pm

    Hi.. I am new to Json.. I am trying to use your code but getting error saying JSON is not defined. I have included the json2.js but still getting the eroror. Do i need to do something explicitly.

  8. Greg
    March 17, 2009 at 8:36 pm

    No, it should work fine as is. Maybe try using the code i attached at the end of the post. Unzip it and run, if it will work, you can probably take it from there. This is how i do it … step by step :) good luck sanjay.

  9. sanjay
    March 22, 2009 at 7:08 pm

    Hi Greg. Thanks for your reply. Yeah i guess i was doing some mistake by myself. It is working fine. I am able to hook the thing into my project now. Thanks a lot. It fits most suitably in my product. Thanks again.

  10. sanjay
    March 25, 2009 at 11:06 am

    I have one more doubt. In this case i have to call a separate script each time i want to perform some action. E.g. – for saving i will have to call a save script for delete i will have to call a delete script.

    What i want is to have one file with all functions and call a particular function in some file.
    One way i can think of is passing the function name in the parameter. But is there any better way which i can use???

    Thanks in advance.

  11. Luci
    April 9, 2009 at 8:21 am

    Thanks for this tutorial :)

  12. satish
    April 18, 2009 at 11:53 am

    I have array ordertext i want to assign the array value
    as below
    JSONObject.ordertext[i] but it not coming its saying ordertext[i] is undefined

  13. ronggur
    April 24, 2009 at 7:49 am

    hi Greg, thank’s a alot for the tutorial..

    just wanna add some small thing in the php file..

    somehow in my php code, it won’t parse the ‘$decoded = json_decode($_GET['json']);’ part.. until i added stripslashes function to $_GET['json'].

  14. Greg
    April 24, 2009 at 4:41 pm

    Hi Ronggur and thanks for the useful commnet.

    I think it is because you had “magic_quotes_gpc” set to on in your php.ini file.

  15. Nora
    May 16, 2009 at 4:23 pm

    If you had some way of rating posts I would for sure give you a high rating my friend!

  16. Manas
    June 23, 2009 at 6:10 pm

    Hey that was awesome!!!..exactly what I was looking for

  17. Sajjan
    June 27, 2009 at 3:08 am

    Hi,

    I am using json2.js and trying to parse array but I am getting a script error saying “text.replace is not a function” json2.js(line 452)

    Here is the variable that i am trying to parse:

    var menuData =
    {
    menus:[
    {
    id:'17',
    text:'menu1',
    items:['aaa','bbb']
    },
    {
    id:'19',
    text:'menu2',
    items:['ccc','ddd']
    },
    {
    id:'18',
    text:'menu3',
    items:['eee','fff']
    }
    ]
    };
    menuData = JSON.parse(menuData);

  18. Mary
    July 3, 2009 at 9:54 pm

    Thoughtful post and well written. Please write more on this if you have time.

  19. Ahmad Ginani
    August 23, 2009 at 2:30 pm

    Thanks for your tutorial, It is very useful for me.

  20. jconstantino
    August 27, 2009 at 1:16 pm

    Thank you!

  21. PaulBM
    August 31, 2009 at 1:56 am

    Superb tutorial. I’ve improved my JSON knowledge greatly thanks to your work. I was stuck at first until I read ronggur’s comment about stripslashes().

  22. jaywink
    September 5, 2009 at 4:35 pm

    Thanks! This was a great help getting to learn something about JSON

  23. manki
    December 2, 2009 at 2:12 am

    Hey thanks a lot! that was exactly what I’ve been looking for.
    great job!

  24. Alex
    December 26, 2009 at 6:49 am

    So how do you use the decoded variable in your PHp file?

  25. v14nt0
    January 19, 2010 at 4:28 am

    Great tutorial…,
    How about the opposite of this, like
    PHP->JSON->javascript

    -PHP : Get server side data or query
    -JSON:convert it to JSON
    -javascript: use the data with javascript

    THanks,

Leave a Reply

Previous Post
Next Post