要做一个小程序,使用了mui,但是 mui的ajax死活连不上后端(使用了内网穿透),所以就用了 jquery的ajax:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
<title></title>
<script src="js/mui.min.js"></script>
<link rel="stylesheet" type="text/css" href="css/registLogin/util.css">
<link rel="stylesheet" type="text/css" href="css/registLogin/main.css">
<script type="text/javascript" charset="utf-8">
mui.init();
</script>
<style>
.p-t-85 {
padding-top: 10px;
}
.p-b-70 {
padding-bottom: 35px;
}
.m-t-85 {
margin-top: 15px;
}
.container-login100 {
padding: 25px;
}
/*toast信息提示*/
.mui-toast-container {
bottom: 50% !important;
}
.mui-toast-message {
opacity: 0.6;
color: #fff;
width: 180px;
padding: 70px 5px 10px 5px;
}
</style>
</head>
<body>
<div class="mui-content">
<div class="container-login100">
<div class="wrap-login100 p-t-85 p-b-20">
<form id="userform">
<span class="login100-form-title p-b-70">
<h5>慕信</h5>
</span>
<div class="wrap-input100 validate-input m-t-85 m-b-35">
<input class="input100" type="text" id="username" name="username" placeholder="用户名">
<span class="focus-input100"></span>
</div>
<div class="wrap-input100 validate-input m-b-50">
<input class="input100" type="password" id="txt_password" name="password" placeholder="密码">
<span class="focus-input100"></span>
</div>
<div class="container-login100-form-btn">
<input type="button" id="registOrLogin" class="login100-form-btn" value="登录/注册"/>
<!-- <button type="submit" id="registOrLogin" class="login100-form-btn">
登录/注册
</button> -->
</div>
</form>
</div>
</div>
</div>
<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<script type="text/javascript" src="js/app.js" ></script>
<script type="text/javascript">
mui.plusReady(function (e) {
//获取每台手机的唯一cid
var cid = plus.push.getClientInfo().clientid;
$("#registOrLogin").click(function () {
var username=$("#username").val();
var password=$("#txt_password").val();
//判断用户名是否为空,如果为空则让其获得焦点
if(!app.isNotNull(username)){
//focus()方法为获取焦点
$("#username").focus();
app.showToast("用户名不得为空","error");
}
if (!app.isNotNull(password)){
$("#txt_password").focus();
app.showToast("密码不得为空","error");
}
//判断用户名和密码的长度,进行限制
if (username.length > 12) {
app.showToast("用户名长度不能超过12","error");
return false;
} else if (password.length > 12){
app.showToast("密码长度不能超过12","error");
return false;
}
var user={
username:username,
password:password
};
$.ajax({
url:"http://liupeng.nat300.top/u/registOrLogin", //提交的地址
data: JSON.stringify(user),
contentType: "application/json;charset=utf-8",
dataType:'JSON', // 处理Ajax跨域问题
type:"POST", //提交的方法
error: function(request) { //失败的话
alert("提交失败 error");
},
success: function(data) { //成功
alert("ok"); //就将返回的数据显示出来
}
});
});
//阻止默认时间,阻止默认表单提交
})
</script>
</body>
</html>
注意:在后端 :
传的是对象,
如果不是传递对象,可以在 ajax中:
data: {
username:username,
password:password
},
但是后台一定 将 各个参数都列出