JQuery Mobile is a rapidly growing framework for smartphones and tablets and is gaining a lot of developer attention. The nice thing about it is we can also use all the power of JQuery along with it. Today I’ll cover a simple example that uses JQuery Mobile and PHP to send some data to the server and get a personalized message back. A “Hello World JQuery Mobile with PHP” if you will.
I have a previous JQuery Mobile tutorial that uses Ajax so you can also refer to the code in there. The difference is that article uses a form, this one doesn’t.
Update – Nov. 11, 2010: Code updated to reflect changes in JQuery Mobile Alpha 2.
To get started I had a local web server and created a folder to put my files. I used Apache 2 but feel free to use anything that can run PHP. The PHP code is dead simple:
Save that in a file called callajax.php.
Note: Using Ajax in JQuery is simple, see the docs for more information.
The full code for the index.html file is as follows:
JQuery Mobile AJAX
A few things to note:
– The call to the server uses this address: http://10.0.2.2/mobileajax/callajax.php
This is because when I use the Android emulator to run this web app it doesn’t currently support “localhost” so you need to use the 10.0.2.2 address instead.
– I’m simply passing the value of the textbox to the PHP script (obviously you need some real security here in a production app as you should never trust data from the client). PHP processes this data and sends the reply back. If an error occurs in the Ajax call I capture that and print some data out.
Here are a couple screenshots: