jQuery Mobile：如何正确提交表单数据
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了jQuery Mobile：如何正确提交表单数据相关的知识，希望对你有一定的参考价值。
这是一个jQuery Mobile问题，但它也与纯jQuery有关。
如何在没有页面转换的情况下将表单数据发布到页面集到表单操作属性中。我正在构建phonegap应用程序，我不想直接访问服务器端页面。
我尝试过几个例子，但每次表格都会将我转发到目标php文件。
介绍
这个例子是使用jQuery Mobile 1.2创建的。如果你想看到最近的例子，那么看看这个article或这个更复杂的one。您将找到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://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>标签的最佳选择。
问题是JQuery Mobile使用ajax来提交表单。对此的简单解决方案是禁用ajax并将表单作为普通表单提交。
简单的解决方案：form action =“”method =“post”data -ajax =“false”
以上是关于jQuery Mobile：如何正确提交表单数据的主要内容，如果未能解决你的问题，请参考以下文章
jQuery Mobile - 如何将表单提交到 URL 并传输到 DOM 内的另一个页面？
jQuery Mobile-jquery Mobile 怎么用ajax提交表单