大佬教程收集整理的这篇文章主要介绍了jQuery Mobile:如何正确提交表单数据,大佬教程大佬觉得挺不错的,现在分享给大家,也给大家做个参考。
本示例是使用jquery Mobile 1.2创建的。如果你想看到最近的例子然后看看这个 或者这个更复杂的 。您将找到两个详细解释的工作示例。如果您还有其他问题,请在文章评论部分中提问。
表单提交是jquery Mobile一直存在的问题。
有几种方法可以实现。我将列出其中一些。
如果您正在使用phonegap应用程序,并且不想直接访问服务器端php,这是最好的解决方案。如果要创建phonegap iOS应用,这是正确的解决方案。
<!DOCTYPE HTML>
<HTML>
<head>
<title>jQM Complex Demo</title>
<Meta name="vIEwport" content="wIDth=device-wIDth, height=device-height, initial-scale=1.0"/>
<@R_403_6862@ 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>
<?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 = ";
?>
$(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
}
这是一个jQuery Mobile问题,但它也与纯jQuery有关。
如何在不将页面转换到设置为表单操作属性的页面的情况下发布表单数据。我正在构建phonegap应用程序,并且我不想直接访问服务器端页面。
我尝试了几个示例,但是每次表单都将我转发到目标php文件。
以上是大佬教程为你收集整理的jQuery Mobile:如何正确提交表单数据全部内容,希望文章能够帮你解决jQuery Mobile:如何正确提交表单数据所遇到的程序开发问题。
如果觉得大佬教程网站内容还不错,欢迎将大佬教程推荐给程序员好友。
本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。