您的位置：首页 > Web前端 > JQuery

JQuery下的AJAX响应例子

2011-04-26 18:34 183 查看

用户登录文件，其实可以用HTML的静态页面

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="mylogin.aspx.cs" Inherits="mylogin" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<script src="Scripts/jquery-1.4.1.min.js" type="text/javascript"></script>
<script language ="javascript" type="text/javascript">
$(document).ready(function () {

//用户录入的时候提示
$("#txtUserName").change(function () {
if ($("#txtUserName").val() != "") {
$("#userNameTip").html("");
}
else {
$("#userNameTip").html("请输入用户名");
}
});

//密码录入的时候提示
$("#txtPassword").change(function () {
if ($("#txtPassword").val() != "") {
$("#passwordTip").html("");
}
else {
$("#passwordTip").html("请输入密码");
}
});

//提交前检查录入情况
$("#submitLogin").click(function () {
if (CheckInput()) {
AjaxLogin();
}
});
});

//检查用户是否录入
function CheckInput() {
var flag=true;
if ($("#txtUserName").val() == "") {
$("#userNameTip").html("请输入用户名");
flag = false;
}
if ($("#txtPassword").val() == "") {
$("#passwordTip").html("请输入密码");
flag = false;
}

if (flag)
return true;
else
return false;
}

//Ajax方式请求登陆，注意格式
function AjaxLogin() {
$.ajax({
type: "post",
url: "Ajax/userLogin.ashx",
data: {
userName: $("#txtUserName").val(),
password: $("#txtPassword").val()
},
dataType: "string",
beforeSend: function () {
//请求响应前，给出友好提示
$("#maxDiv").css("FILTER", "Alpha(Opacity=50)");
$("#maxDiv").css("position", "absolute");
$("#maxDiv").css("z-index", "1");
$("#maxDiv").css("visibility", "true");
$("#maxDiv").css("top", "0");
$("#maxDiv").css("left", "0");
$("#maxDiv").css("width", "800px");
$("#maxDiv").css("height", "600px");
$("#maxDiv").css("text-align", "center");
$("#maxDiv").css("vertical-align", "middle");
$("#maxDiv").html("<br><br><img src='images/loading.gif' /><font size=4 color=#333333>正在处理，请稍候...</font>");
},
success: function (data) {
//响应完成后，提示去掉
$("#maxDiv").css("width", "0px");
$("#maxDiv").css("height", "0px");
$("#maxDiv").html("");

if (data == "success") {
alert("ok");
}
else {
alert("fail");
}
},
error: function () {
//响应完成后，提示去掉
$("#maxDiv").css("width", "0px");
$("#maxDiv").css("height", "0px");
$("#maxDiv").html("");

alert("系统繁忙，请稍候再试");
}
})
}
</script>
</head>
<body>
<form id="form1" runat="server">
<div>

<table style="width:100%; " border=1>
<tr>
<td>
<div>
用户名：</div>
</td>
<td>
<input id="txtUserName" type="text" /><div id="userNameTip" style="width: 338px">
</div>
</td>
<td>
</td>
</tr>
<tr>
<td>
<div>
密码：</div>
</td>
<td>
<input id="txtPassword" type="password" /><div id="passwordTip" style="width: 344px">
</div>
</td>
<td>
</td>
</tr>
<tr>
<td>
</td>
<td>
<input id="submitLogin" type="button" value="登陆" /></td>
<td>
</td>
</tr>
</table>
</div>
</form>
<div id="maxDiv">
</div>
</body>
</html>

AJAX响应的文件，这里我用的ashx文件，其实也可以用aspx文件，但是我觉得ashx文件效率高点。

如果想使用SESSION，需要用 System.Web.SessionState 名空间，并且继承 IRequiresSessionState 类。

<%@ WebHandler Language="C#" Class="userLogin" %>

using System;
using System.Web;

public class userLogin : IHttpHandler {

public void ProcessRequest (HttpContext context) {
context.Response.ContentType = "text/plain";

string userName = context.Request["userName"].ToString();
string password = context.Request["password"].ToString();
if (userName.Equals("admin") && password.Equals("admin"))
context.Response.Write("success");
else
context.Response.Write("fail");

//context.Response.Write("Hello World");
}

public bool IsReusable {
get {
return false;
}
}
}

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

标签：

相关文章推荐

新的分享

章节导航