表单提交
表单提交
提问于 2014-06-23 06:34:26
我的简单应用程序包含两页。
1.登入网页
2.第一页(登录成功时显示)
登录表单通过向check.php页面发送数据来获取用户输入并验证用户。
登录页和页
<body>
<div data-role="page" id="login" >
<div data-role="header" data-position="fixed">
<h1>Login</h1>
</div>
<div data-role="main" class="ui-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-role="footer" data-position="fixed" >
<h1>IIL 2014</h1>
</div>
</div>
<div data-role="page" id="pageone" class="my-page">
<div data-role="header" data-position="fixed">
<a href="#" id="user" data role="button"></a>
<h1>Dashboard</h1>
<a href="#" id="refreshdata" data role="button">Refresh</a>
</div>
<div data-role="main" class="ui-content">
</div>
<div data-role="footer" data-position="fixed" >
<h1>IIL 2014</h1>
</div>
</div>
</body>java脚本函数
<script>
$(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: 'http://iilsfa.br0s.info/Dashboard/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("#pageone");
},
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', '#pageone', function(){
$('#user').append('This is a result of form submition: ' + resultObject.formSubmitionResult);
});
var resultObject = {
formSubmitionResult : null
}
</script>check.php
<?php
echo "Username =xxxxxx ";
?>我的问题是javascript函数没有从server.When中发送或接收任何数据--我输入了值到两个文本框并单击submit按钮，没有happens.Please帮助我解决这个问题。下面是我遵循jQuery Mobile: How to correctly submit form data的示例
回答 1
Stack Overflow用户
回答已采纳
发布于 2014-06-23 08:59:02
$.mobile.showPageLoadingMsg()和$.mobile.hidePageLoadingMsg()在jQM版本1.2中不再受欢迎。使用$.mobile.loading('show')和$.mobile.loading('hide')代替。
这是部分修改的代码
beforeSend: function() {
// This callback function will trigger before data is sent
$.mobile.loading('show') // This will show ajax spinner
},
complete: function() {
// This callback function will trigger on data sent/received complete
$.mobile.loading('hide') // This will hide ajax spinner
},用jqm 1.4.2测试
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/24359728
复制相关文章
相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号