I have been lately developing a lot with Javascript in a very
interesting project which is about wines. In that project we are
creating a software with HTML5, Javascript, CSS and on the serverside
with PHP and MySQL. I’ll post more about that project propably at fall
when we release the project. It is going to be huge. This post is about
some of the technologies we are using on that project.
On this project I have learned to use jQuery.
It is a Javascript library to ease the development of Javascript based
websites and offers massive framework for frontend web development. One
major part of our project is Ajax, Asynchronous JavaScript and XML. In
common language you can you can load data into website without
refreshing it.
On this post I will show an example of how to do Ajax with jQuery and
how to process multidimensional JSON data table coming in through Ajax.
HTML
We will start with HTML skeleton with jQuery already embedded in it from Google.
Inside HTML we have three buttons, these buttons will be used for getting different kind of wines from our serverside.
There is also a div where the wines will appear after being fetched from serverside.
Add the Javascript code below to line 7.
1234567891011121314151617181920212223
<!DOCTYPE html><html><head><title>jQuery Ajax Example with JSON Response</title><script src="//ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"type="text/javascript"></script><!-- Write Javascript code here --></head><body><formmethod="post"action=""><buttonvalue="all"type="submit">Get All Wines!</button><buttonvalue="red"type="submit">Get Red Wines!</button><buttonvalue="white"type="submit">Get White Wines!</button></form><divid="wines"><!-- Javascript will print data in here when we have finished the page --></div></body></html>
Javascript
Here we have the Javascript for the HTML.
Basically we have a submit event that fires when a button is clicked.
Next we take the value of the button clicked and send it to
serverside.php with jQuery’s ajax()-function. From this function we get
back our JSON data which we’ll process on success.
After that it’s simple if and else to append our #wines div.
Add this to the HTML Skeleton in HEAD section.
<scripttype="text/javascript">$(document).ready(function(){$(':submit').live('click',function(){// This event fires when a button is clickedvarbutton=$(this).val();$.ajax({// ajax call startsurl:'serverside.php',// JQuery loads serverside.phpdata:'button='+$(this).val(),// Send value of the clicked buttondataType:'json',// Choosing a JSON datatypesuccess:function(data)// Variable data contains the data we get from serverside{$('#wines').html('');// Clear #wines divif(button=='all'){// If clicked buttons value is all, we post every winefor(variindata.red){$('#wines').append('Red wine: '+data.red[i]+'<br/>');}for(variindata.white){$('#wines').append('White wine: '+data.white[i]+'<br/>');}}elseif(button=='red'){// If clicked buttons value is red, we post only red winesfor(variindata){$('#wines').append('Red wine: '+data[i]+'<br/>');}}elseif(button=='white'){// If clicked buttons value is white, we post only white winesfor(variindata){$('#wines').append('White wine: '+data[i]+'<br/>');}}}});returnfalse;// keeps the page from not refreshing });});</script>
Serverside
Now we need the serverside where Ajax will connect, create this file by the name of serverside.php if you wish everything to run smoothly.
This simple php gets clicked buttons value sent from our Ajax-function. After that we create a multidimensional data table.
Finally we do a PHP’s JSON-encoding and if else the right table to send back to Ajax.
123456789101112131415161718192021222324252627
<?php// Get value of clicked button$button=$_GET['button'];// Red wine table$red=array('Chianti','Barolo','Pinot Noir');$white=array('Chardonnay','Cava','Chablis');// Combine red and white tables into one multidimensional table$winetable=array("red"=>$red,"white"=>$white,);// Finally depending on the button value, JSON encode our winetable and print itif($button=="red"){printjson_encode($red);}elseif($button=="white"){printjson_encode($white);}else{printjson_encode($winetable);}?>
These codes will produce a working HTML site with jQuery doing some
cool Ajax! You can use them as a skeleton when you are building your own
Ajax based website.