php jQuery Mobile：如何正确提交表单数据
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/15205437/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
jQuery Mobile: How to correctly submit form data
提问by user2001897
This is a jQuery Mobile question, but it also relates to pure jQuery.
这是一个 jQuery Mobile 问题，但它也与纯 jQuery 相关。
How can I post form data without page transition to the page set into form action attribute. I am building phonegap application and I don't want to directly access server side page.
如何在没有页面转换到设置为表单操作属性的页面的情况下发布表单数据。我正在构建 phonegap 应用程序，我不想直接访问服务器端页面。
I have tried few examples but each time form forwards me to the destination php file.
我尝试了几个示例，但每次表单都会将我转发到目标 php 文件。
回答by Gajotres
Intro
介绍
This example was created using jQuery Mobile 1.2. If you want to see recent example then take a look at this articleor this more complex one. You will find 2 working examples explained in great details. If you have more questions ask them in the article comments section.
此示例是使用 jQuery Mobile 1.2 创建的。如果你想看到最近的例子然后看看这个文章或者这个更复杂的一个。您将找到 2 个详细解释的工作示例。如果您有更多问题，请在文章评论部分询问他们。
Form submitting is a constant jQuery Mobile problem.
表单提交是一个持续的 jQuery Mobile 问题。
There are few ways this can be achieved. I will list few of them.
有几种方法可以实现这一点。我将列出其中的几个。
Example 1 :
示例 1：
This is the best possible solution in case you are using phonegap application and you don't want to directly access a server side php. This is an correct solution if you want to create an phonegap iOS app.
如果您正在使用 phonegap 应用程序并且您不想直接访问服务器端 php，这是最好的解决方案。如果您想创建 phonegap iOS 应用程序，这是一个正确的解决方案。
index.html
索引.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：
<?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 :
索引.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
}
回答by dino
I have run into same issue where I am calling another .php page from my index.html. The .php page was saving and retrieving data and drawing a piechart. However I found that when piechart drawing logic was added, the page will not load at all. The culprit was the line that calls the .php page from my index.html:
我遇到了同样的问题，我从 index.html 调用另一个 .php 页面。.php 页面正在保存和检索数据并绘制饼图。但是我发现当添加饼图绘制逻辑时，页面根本不会加载。罪魁祸首是从我的 index.html 调用 .php 页面的那一行：
<form action="store.php" method="post">
If I change this to:
如果我将其更改为：
<form action="store.php" method="post" data-ajax="false">
, it will work fine.
，它会正常工作。
回答by BGB73
On using PHP and posting data
关于使用 PHP 和发布数据
Use
data-ajax = "false"is the best option on <form>tag.
使用
data-ajax = "false"是<form>标签的最佳选择。
回答by Akshay Paladiya
Problem is that JQuery Mobile uses ajax to submit the form. The simple solution to this is to disable the ajax and submit form as a normal form.
问题是 JQuery Mobile 使用 ajax 提交表单。对此的简单解决方案是禁用 ajax 并将表单作为普通表单提交。
Simple solution: form action="" method="post" data-ajax="false"
简单的解决方法：form action="" method="post" data-ajax="false"
