Thursday, January 22, 2009

Our last installment of the Super Simple AJAX Forms with jQuery and JSON we cover the server side of things. The dataservice.php file covers the business logic behind the web form. Like the webpage.html I boiled this down to the smallest and most reusable code possible.


The very top of the file contains MySQL setup code for connecting to the database. If this is not familiar by now then this tutorial is probably a bit over your head anyhow. In any case set that up, i'm not going to cover it in detail here. Let's get to the meat of our discussion.

PHP Parameters

This code is straightforward. We simply make sure we have our unique key (id) and our action (something to do). If we do we proceed to map the parameter action to a function we'll call. We sanitize the ID coming in to prevent SQL injection.


getUser() function

This function is called when we load our webpage.html. It's called by the jQuery ready() in the HTML. You can see here, it is a very simple query, then we push the result set into an array. I do this in the example to show that with JSON you can have multiple row results in the response going back. That way you can even persist the data locally and re-use it when you need to. If we have a result set we call json_encode() with our records. This turns it into JSON that we read with javascript on the browser side.


So really, all we do here is build a JSON string out of our MySQL resultset. The big key is to understand that this is stored in a JSON array. You need to get a good understanding of JSON to be effective with this sort of application. Once you do it all falls in line. Basically a JSON array is a container of JSON objects. Check out Introducing JSON for more details.



Now, you may not be on PHP5 which has json_encode() natively. So I put in here a link to the source code for a JSON encode function. Pear also has this type of library but depending on your web host situation you may need to fall back on the JSON.php file itself.


updateUser() function

Finally, our update statement. This is as simple as our process for filling the FLD_ in the webpage.html file. We scan the entire $_REQUEST array for any FLD_ and then post those to our database string. It works just like how we built our queryString in the webpage.html post. We set the values to update, then we runs the mysql_query() to update records.


Take note of a few things here. First we strip off the FLD_ prefix. We also sanitize the input data by stripping out slashes and escaping special characters for mysql. Again this is to prevent SQL injection. I see many people who don't do this with AJAX services and thus are very open to attack on their back end. I also pull off the last ", " off the end of the update statement.



We last check to see we updated a row or we return an error. The webpage.html code looks for the OK, so if we don't have it then we display the error.


That is it. You should be able to use this as an example and start to your own AJAX code. Remember this is a learning example and that you should make sure you have far better error checking and recovery from SQL errors. You might also want to adapt this code for an insert statement or a delete statement to have full CRUD updates to your database.


My purpose here was to show you that asynchronous web calls are not that complicated with the right library (jQuery). Now get out there and write some code!

Comments: Post a Comment

Links to this post:

Create a Link

<< Home


Recent Posts


Super Simple AJAX Forms with jQuery and JSON : web...
Super Simple AJAX Forms with jQuery and JSON : Int...
Print Buttons Anywhere
Icons after your links
Changes in web hosting
Web Table Sorting (Without the headache)
Google Chart API
1PB Storage, $17,8800 Not bad eh?
Google Chrome Anyone?
Fun IT Stuff


Archives

01/01/2005 - 02/01/2005
02/01/2006 - 03/01/2006
03/01/2006 - 04/01/2006
04/01/2006 - 05/01/2006
05/01/2006 - 06/01/2006
09/01/2006 - 10/01/2006
10/01/2006 - 11/01/2006
11/01/2006 - 12/01/2006
12/01/2006 - 01/01/2007
04/01/2007 - 05/01/2007
05/01/2007 - 06/01/2007
01/01/2008 - 02/01/2008
02/01/2008 - 03/01/2008
05/01/2008 - 06/01/2008
06/01/2008 - 07/01/2008
08/01/2008 - 09/01/2008
09/01/2008 - 10/01/2008
11/01/2008 - 12/01/2008
12/01/2008 - 01/01/2009
01/01/2009 - 02/01/2009
02/01/2009 - 03/01/2009
04/01/2009 - 05/01/2009
05/01/2009 - 06/01/2009
07/01/2009 - 08/01/2009
01/01/2010 - 02/01/2010

My Software

Blinky - GBPVR Plugin
PhotoCopy - GBPVR Plugin
QTC - Quick Test Case
rBoop - Rob's Timers

Programming Links

C# Formatter
NSIS

Other Links

Damn Small Linux

Sites I Manage

Do it yourself SEO. Cheap.
Pet Supplies
Dog toy of the month club
SqueakerZ pet Deals
Geocaching Community
Hitch hiker Tracking