|
ajax同步，ajax开发注意事项，ajax的作用就是实时同步。无刷新技术。 ajax登录案列： <script>
//$("[type=password]").val = "";
////登录链接测试，使用时可删除
//$(".submit_btn").click(function () {
//
//});
//主程序入口
$(function () {
//登录
LoginimmediatelyUser();
//验证用户名是否存在
checkUserName();
});
//登录模块
function LoginimmediatelyUser()
{
$("[type=button]").click(function () {
$.post("login.ashx", { name: $("#txtName").val(), pwd: $("#txtPwd").val() }, function (data) {
if (data == "ok") {
window.location.href = "index.aspx";
}
else
{
alert("登录异常");
window.location.href = "Login.aspx";
}
});
});
}
//用户名是否存在验证
function checkUserName()
{
$("#txtName").blur(function () {
var inputVal = $("#txtName").val();
var reg = /[\w\d]{6,}/g;
if (inputVal == "")
{
$("#tittleId").html("不允许为空");
}
else if (!reg.test(inputVal)) {
$("#tittleId").html("* 请输入6位以上的英文字母或数字的组合");
$("#tittleId").css("color", "red");
}
else
{
//异步验证用户名是否存在
$.post("checkUserName.ashx", { name: $("#txtName").val(), pwd: $("#txtPwd").val() }, function (returndata) {
//用户名存在，返回1。否则返回0
if (returndata == "1") {
$("#tittleId").html("* 此用户名已被注册").css("color", "red");
// $("#btn_register").attr("disabled", "disabled");
}
else {
$("#tittleId").html("恭喜！此用户名可以使用").css("color", "green");
// $("#btn_register").removeAttr("disabled");
}
});
}
});
}
</script>
前端源码 <body>
<div class="layui-canvs"></div>
<div class="layui-layout layui-layout-login">
<div style="text-align:center; color:yellow;border:1px; border-color:yellow" id="tittleId"></div>
<h1>
<strong>LarryCMS管理系统后台</strong>
<em>Management System</em>
</h1>
<div class="layui-user-icon larry-login">
<input type="text" placeholder="账号" class="login_txtbx" id="txtName"/>
</div>
<div class="layui-pwd-icon larry-login">
<input type="password" placeholder="密码" class="login_txtbx" id="txtPwd"/>
</div>
<div class="layui-val-icon larry-login">
<div class="layui-code-box">
<input type="text" id="code" name="code" placeholder="验证码" maxlength="4" class="login_txtbx"/>
<img src="images/verifyimg.png" alt="" class="verifyImg" id="verifyImg" onclick="javascript:this.src='xxx'+Math.random();" />
</div>
</div>
<div class="layui-submit larry-login">
<input type="button" value="立即登陆" class="submit_btn"/>
</div>
</div>
<script type="text/javascript" src="common/layui/lay/dest/layui.all.js"></script>
<script type="text/javascript" src="js/login.js"></script>
<script type="text/javascript" src="jsplug/jparticle.jquery.js"></script>
<script type="text/javascript">
$(function(){
$(".layui-canvs").jParticle({
background: "#141414",
color: "#E6E6E6"
});
});
</script>
</body>
| 
转播
