您的位置：首页 > 产品设计 > UI/UE

mui ajax请求登录

2016-07-26 00:00 477 查看

摘要: mui ajax

<html class="ui-page-login">

</head>

<body>

<div class="mui-content">
<form id='login-form' class="mui-input-group">
<div class="mui-input-row">
<label>账号</label>
<input id='username' type="text" class="mui-input-clear mui-input" placeholder="请输入账号">
</div>
<div class="mui-input-row">
<label>密码</label>
<input id='password' type="password" class="mui-input-clear mui-input" placeholder="请输入密码">
</div>
</form>

<div class="mui-content-padded">
<button id='login' class="mui-btn mui-btn-block mui-btn-primary">登录</button>

</div>

</div>
<script src="js/mui.min.js"></script>
<script src="js/mui.enterfocus.js"></script>
<script src="js/app.js"></script>
<script>
mui.init();
//封装ajax
function postData(url, data, callback, waitingDialog) {
mui.ajax(url, {
data: 'data=' + JSON.stringify(data),
dataType: 'json',
type: 'post',
contentType: "application/x-www-form-urlencoded; charset=utf-8",
success: callback,
error: function(xhr, type, errorThrown) {
waitingDialog.close();
mui.alert("网络连接失败，请重新尝试一下", "错误", "OK", null);
}
});
}

function plusReady() {
// 弹出系统等待对话框
return plus.nativeUI.showWaiting("等待中...");
}

//打开页面方法

function openGroup() {
mui.openWindow({
url: 'Groupcompany/main.html',
show: {
autoShow: true
}
});
}
function openCompany() {
mui.openWindow({
url: 'Companyproject/companyproject.html',
show: {
autoShow: true
}
});
}
function openProject() {
mui.openWindow({
url: 'Project/project.html',
show: {
autoShow: true
}
});
}
function openObject() {
mui.openWindow({
url: 'Object/object.html',
show: {
autoShow: true
}
});
}
document.getElementById("login").addEventListener('tap', function() {
// alert("点击了登录按钮");
// 显示一个等待的对话框
var wd = plusReady();
// 构造要传递的json数据
// 内容就是 return document.getElementById();
var data = {
username: document.getElementById("username").value,
password: document.getElementById('password').value
};
// 调用ajax
postData('http://123.57.237.52/app.php/Login/Login',
//服务端的URL
data, // json 数据
function(data) {
wd.close(); // 调用成功，先关闭等待的对话框
if(data.status != 1) {
// 如果密码错误，提示一下信息
mui.alert("用户名或密码错误", "登录错误", "关闭");
return;
}
switch(data.response.info.role) {
case "group":
openGroup();
break;
case "company":
openCompany();
break;
case "proprietor":
openProject();
break;
case "project":
openObject();
break;
}

},
wd //传递给postData的最后一个参数，失败的时候关闭等待对话框
);
});
</script>
</body>
</html>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航

mui ajax请求 登录

mui ajax请求登录