介绍
本示例是使用jQuery Mobile 1.2创建的。如果你想看到最近的例子然后看看这个
文章 或者这个更复杂的 一个 。您将找到两个详细解释的工作示例。如果您还有其他问题，请在文章评论部分中提问。
表单提交是jQuery Mobile一直存在的问题。
有几种方法可以实现。我将列出其中一些。
范例1：
如果您正在使用phonegap应用程序，并且不想直接访问服务器端php，这是最好的解决方案。如果要创建phonegap iOS应用，这是正确的解决方案。
index.html
<!DOCTYPE html><html><head> <title>jQM Complex Demo</title> <meta name="viewport" content="width=device-width, height=device-height, initial-scale=1.0"/> <link rel="stylesheet" href="http://pre.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.css" /> <style> #login-button { margin-top: 30px; } </style> <script src="http://www.dragan-gaic.info/js/jquery-1.8.2.min.js"></script> <script src="http://pre.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.js"></script> <script src="js/index.js"></script></head><body> <div data-role="page" id="login" data-theme="b"> <div data-role="header" data-theme="a"> <h3>Login Page</h3> </div> <div data-role="content"> <form id="check-user" data-ajax="false"> <fieldset> <div data-role="fieldcontain"> <label for="username">Enter your username:</label> <input type="text" value="" name="username" id="username"/> </div> <div data-role="fieldcontain"> <label for="password">Enter your password:</label> <input type="password" value="" name="password" id="password"/> </div> <input type="button" data-theme="b" name="submit" id="submit" value="Submit"> </fieldset> </form> </div> <div data-theme="a" data-role="footer" data-position="fixed"> </div> </div> <div data-role="page" id="second"> <div data-theme="a" data-role="header"> <h3></h3> </div> <div data-role="content"> </div> <div data-theme="a" data-role="footer" data-position="fixed"> <h3>Page footer</h3> </div> </div></body></html>check.php：
<?php //$action = $_REQUEST['action']; // We dont need action for this tutorial, but in a complex pre you need a way to determine ajax action nature //$formData = json_depre($_REQUEST['formData']); // Depre JSON object into readable PHP object //$username = $formData->{'username'}; // Get username from object //$password = $formData->{'password'}; // Get password from object // Lets say everything is in order echo "Username = ";?>index.js：
$(document).on('pagebeforeshow', '#login', function(){ $(document).on('click', '#submit', function() { // catch the form's submit event if($('#username').val().length > 0 && $('#password').val().length > 0){ // Send data to server through ajax call // action is functionality we want to call and outputJSON is our data $.ajax({url: 'check.php', data: {action : 'login', formdata: $('#check-user').serialize()}, // Convert a form to a JSON string representation type: 'post', async: true, beforeSend: function() { // This callback function will trigger before data is sent $.mobile.showPageLoadingMsg(true); // This will show ajax spinner }, complete: function() { // This callback function will trigger on data sent/received complete $.mobile.hidePageLoadingMsg(); // This will hide ajax spinner }, success: function (result) { resultObject.formSubmitionResult = result; $.mobile.changePage("#second"); }, error: function (request,error) { // This callback function will trigger on unsuccessful action alert('Network error has occurred please try again!'); } }); } else { alert('Please fill all nececery fields'); } return false; // cancel original event to prevent form submitting }); });$(document).on('pagebeforeshow', '#second', function(){ $('#second [data-role="content"]').append('This is a result of form submition: ' + resultObject.formSubmitionResult); });var resultObject = { formSubmitionResult : null }
