先把js脚本写出来:
<script type="text/javascript">
function ValidForm() {
if (!$('#commentForm').valid())
return false;
else
return true;
}
function PostData() {
if (ValidForm()) {
var uName = $('#username').val();
var pwd = $('#password').val();
$.ajax(
{
url: 'Services/Login.ashx',
data: { username: uName, password: pwd },
type: 'post',
dataType: 'json',
success: function (data) {
if (data.Code == 200) {
window.location = 'Default.aspx';
}
else {
$('#spError').show();
$('#spError').text(data.Message);
}
},
error: function (xhr, e, textStatus) {
var isAjaxRedirect = xhr.status == 200
&& xhr.responseText.match(/!expire/);
if (isAjaxRedirect == '!expire') {
$('#spError').text('提交错误,页面超时请重试!');
}
else
$('#spError').text('提交错误,请重试!');
}
});
}
}
</script>
<div class="lg_form">
<div class="lg_con">
<div class="lg_land_name">
请登录 <span class="field-validation-error" style="display:none;" id="spError"></span></div>
<form class="cmxform" id="commentForm" method="post" action="">
<div class="lg_form_cn">
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr valign="top">
<td width="20%" align="right">
<span class="email_pad">用户名</span>
</td>
<td width="74%">
<input class="ttext ipt1 {required:true,messages:{required:'请输入用户名'}}"
id="username" name="username" type="text" value="" />
</td>
<td width="6%">
</td>
</tr>
<tr valign="top">
<td align="right">
<span class="email_pwl">密</span><span class="email_pwr">码</span>
</td>
<td>
<input class="ttext ipt1 {required:true,messages:{required:'请输入密码'}}" id="password"
name="password" type="password" value="" />
</td>
<td>
</td>
</tr>
</table>
</div>
<input name="repc" type="hidden" value="false" />
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td width="30%">
</td>
<td width="25%" height="80">
<input type="button" class="free_btn3" value="登 录" οnclick="PostData()"/>
</td>
<td width="45%">
</td>
</tr>
</table>
</form>
</div>
</div>
然后是服务器端的C#验证:Login.ashx
/// <summary>
/// Login 的摘要说明
/// </summary>
public class Login : IHttpHandler
{
public void ProcessRequest(HttpContext context)
{
ResponseResult result;
string name = context.Request["username"];
string password = MD5.getMd5(context.Request["password"]);
UserLogic logic = new UserLogic();
bool right = logic.Login(name, password);
if (right == true)
{
result = new ResponseResult { Code = 200, Message = "验证成功!" };
}
else
{
result = new ResponseResult { Code = 400, Message = "用户名或者密码错误!" };
}
context.Response.Write(JsonConvert.SerializeObject(result));
}
public bool IsReusable
{
get
{
return false;
}
}
}
讨论:
<input type="button" class="free_btn3" value="登 录" οnclick="PostData()"/>
type="submit" 和
type="button"的区别是什么?
Ok,看到这里,想必就明白了吧。