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。
- 在PhoneGap上Angularjs / Javascript应用程序的最佳数据持久性？
- PhoneGap是应用程序开发的不错select吗？
- cordova cli生成项目的哪些部分可以在源代码pipe理中安全地进行版本控制？
- 应用程序错误 – 到服务器的连接不成功。 （文件：///android_asset/www/index.html）
- 处理PhoneGap / Cordova中的cookies
- Phonegap InAppBrowser显示PDF格式2.7.0
- Cordova 3.5.0安装错误 – 请安装Android Target 19
- 如何在你的手机插件中获得你的上下文
- CORS和phonegap应用程序
