1.html部分:
<form id="form1" runat="server">
<script src="../script/jquery-v1.10.2.js" type="text/javascript"></script>
<script src="login.js" type="text/javascript"></script>
<div class="" style="height: 160px">
<div>
<label for="username">
帐号:</label>
<input type="text" name="username" />
</div>
<label for="password">
密码:</label>
<input type="password" name="password" />
<input type="submit" id="btnsumit" value="登录" />
<p class="msg"> </p>
</div>
</form>
2.引入登录插件:login.js
/*!
* 插件名称:登录插件封装,使用方法:
$('#form1').login({
url: "loginhandler.ashx",//处理登录验证逻辑的url
username: $("input[name='username']"),//用户名输入框
password: $("input[name='password']"),//密码输入框
msg: $(".msg"), //提示信息
button: $("#btnsumit") //提交按钮
});
*/
(function ($) {
$.fn.login = function (option) {
var defaults = {
url: '/account/login/',
msg: $(this).find('.msg'),
username: $(this).find("input[name='username']"),
password: $(this).find("input[name='password']"),
button: $(this).find("#button")
};
var options = $.extend(defaults, option);
var errmsg = {
'inputusername': '请输入用户名',
'inputpassword': '请填写登录密码',
'passwordlength': '密码应在6-32位字符内',
'noreg': '此账号未注册',
'inviladusername': '帐号不存在',
'accountnotmatch': '账号密码不匹配',
'userlocked': '帐号锁定中,暂时无法登录',
'serverdown': '服务器繁忙,请稍后再试'
//提交数据
function submit() {
var usernameinput = $.trim(options.username.val());
var passwordinput = $.trim(options.password.val());
if (usernameinput == '') {
showmsg('登录名不能为空');
options.username.focus();
return;
}
if (passwordinput == '') {
showmsg('密码不能为空');
options.password.focus();
$.ajax({
type: "post",
url: options.url,
data: "username=" + usernameinput + "&password=" + passwordinput,
success: function (msg) {
var result = eval("[" + msg + "]")[0];
if (result.status == "ok") {
//登录成功处理
showmsg("登录成功....");
} else {
showmsg(errmsg[result.status]);
}
}
});
}
//显示错误信息
function showmsg(msg) {
options.msg.html(msg);
//绑定按钮事件
options.button.bind('click', function () {
submit();
return false;
});
};
})(jquery);
3.页面调用插件:
<script type="text/javascript">
$('#form1').login({
url: "ajaxlogin.aspx",
username: $("input[name='username']"),
password: $("input[name='password']"),
msg: $(".msg"),
button: $("#btnsumit")
</script>
4.后台处理逻辑(请根据实际需求做相应调整)
using system;
using system.web;
using system.web.ui;
namespace whir.sitefactory.website.admin.account
{
public partial class ajaxlogin : page
{
protected void page_load(object sender, eventargs e)
{
string status = processlogin();
response.clear();
response.write(status);
response.end();
private string processlogin()
try
{
string username = httpcontext.current.request.form["username"];
string password = httpcontext.current.request.form["password"];
if (string.isnullorempty(username))
{
return "{status:'inputusername'}"; //请输入用户名
if (string.isnullorempty(password))
return "{status:'inputpassword'}"; //请填写登录密码
if (password.length < 6 || password.length > 32)
return "{status:'passwordlength'}"; //密码应在6-32位字符内
//var user = userservice.getuserbyname(username);
//if (user == null)
//{
// return "{status:'inviladusername'}"; //帐号不存在
//}
//if (user.islocked)
// return "{status:'userlocked'}"; //帐号锁定中,暂时无法登录
//if (user.password.tolower() != password.tomd5().tolower())
//{
// return "{accountnotmatch:'ok'}"; //账号密码不匹配
//其他操作:
//写入客户端cookie
//登录日志
return "{status:'ok'}"; //登录成功
catch (exception ex)
return "{status:'serverdown'}"; //服务器繁忙,请稍后再试
}
}
完整demo下载:
http://download.csdn.net/detail/a497785609/8230309