通过AJAX和PHP，提交JQuery Mobile表单_H5之家 - 中国HTML5教程资源分享第一站

File name: callajax.php

[php]

<?php $firstName = $_POST[firstName]; $lastName = $_POST[lastName]; echo("First Name: " . $firstName . " Last Name: " . $lastName); ?>
File name: index.php

[html]

<!DOCTYPE html> <html> <head> <title>Submit a form via AJAX</title> <link href="http://code.jquery.com/mobile/1.0a4/jquery.mobile-1.0a4.min.css" /> <script src="http://code.jquery.com/jquery-1.5.2.min.js"></script> <script src="http://code.jquery.com/mobile/1.0a4/jquery.mobile-1.0a4.min.js"></script> </head> <body> <script> function onSuccess(data, status) { data = $.trim(data); $("#notification").text(data); } function onError(data, status) { // handle an error } $(document).ready(function() { $("#submit").click(function(){ var formData = $("#callAjaxForm").serialize(); $.ajax({ type: "POST", url: "callajax.php", cache: false, data: formData, success: onSuccess, error: onError }); return false; }); }); </script>  <div data-role="page"> <div data-role="header"> <h1>Call Ajax</h1> </div> <div data-role="content"> <form> <div data-role="fieldcontain"> <label for="firstName">First Name</label> <input type="text" value="" /> <label for="lastName">Last Name</label> <input type="text" value="" /> <h3></h3> <button data-theme="b" type="submit">Submit</button> </div> </form> </div> <div data-role="footer"> <h1>GiantFlyingSaucer</h1> </div> </div> </body> </html>