jQuery Mobile:如何正确提交表单数据

这是一个jQuery Mobile的问题,但它也涉及纯粹的jQuery。

如何发布表单数据,而无需将页面转换到设置为表单操作属性的页面。 我build立phonegap应用程序,我不想直接访问服务器端页面。

我已经尝试了几个例子,但每次forms向前我的目标PHP文件。

介绍

这个例子是使用jQuery Mobile 1.2创build的。 如果你想看最近的例子,那么看看这篇文章或这个更复杂的。 你会发现2个工作实例详细解释。 如果您有更多的问题,请在文章评论部分提问。

表单提交是一个恒定的jQuery Mobile问题。

有几种方法可以实现。 我将列出其中几个。

例1:

这是最好的解决scheme,如果你使用phonegap应用程序,你不想直接访问服务器端的PHP。 如果你想创build一个phonegap iOS应用程序,这是一个正确的解决scheme。

的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://code.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://code.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" class="ui-body ui-body-a ui-corner-all" 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 code you need a way to determine ajax action nature //$formData = json_decode($_REQUEST['formData']); // Decode 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 } 

我遇到了同样的问题,我从我的index.html调用另一个.php页面。 .php页面保存并检索数据并绘制一个饼图。 但是我发现,当添加了图表绘制逻辑时,页面根本不会加载。 罪魁祸首是从我的index.html调用.php页面的行:

 <form action="store.php" method="post"> 

如果我改变这个:

 <form action="store.php" method="post" data-ajax="false"> 

,它会正常工作。

在使用PHP和发布数据

使用data-ajax = "false"<form>标签上的最佳select。