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 isthat 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:
<?php
echo
"Hello "
.
$_REQUEST
[
"name"
];
?>
|
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:
<!DOCTYPE html>
<
html
>
<
head
>
<
title
>JQuery Mobile AJAX</
title
>
<
link
rel
=
"stylesheet"
href
=
"http://code.jquery.com/mobile/1.0a2/jquery.mobile-1.0a2.min.css"
/>
<
script
src
=
"http://code.jquery.com/jquery-1.4.4.min.js"
></
script
>
<
script
src
=
"http://code.jquery.com/mobile/1.0a2/jquery.mobile-1.0a2.min.js"
></
script
>
</
head
>
<
body
>
<
script
>
$(function() {
$("#callAjax").click(function() {
var theName = $.trim($("#theName").val());
if(theName.length > 0)
{
$.ajax({
type: "POST",
url: "http://10.0.2.2/mobileajax/callajax.php",
data: ({name: theName}),
cache: false,
dataType: "text",
success: onSuccess
});
}
});
$("#resultLog").ajaxError(function(event, request, settings, exception) {
$("#resultLog").html("Error Calling: " + settings.url + "<
br
/>HTPP Code: " + request.status);
});
function onSuccess(data)
{
$("#resultLog").html("Result: " + data);
}
});
</
script
>
<
div
data-role
=
"page"
id
=
"indexPage"
>
<
div
data-role
=
"header"
>
<
h1
>JQuery Mobile</
h1
>
</
div
>
<
div
data-role
=
"content"
>
<
div
data-role
=
"fieldcontain"
>
<
label
for
=
"theName"
>Please enter your name:</
label
>
<
input
type
=
"text"
id
=
"theName"
name
=
"theName"
value
=
""
/>
</
div
>
<
input
id
=
"callAjax"
type
=
"button"
value
=
"Call Ajax"
/>
<
div
id
=
"resultLog"
></
div
>
</
div
>
<
div
data-role
=
"footer"
>
<
h1
>AJAX Demo</
h1
>
</
div
>
</
div
>
</
body
>
</
html
>
|
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 the10.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:
280
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
