菜鸟蔡之Ajax复习第三篇(Ajax之无刷新登录)
            网络编程 发布日期:2025/11/4 浏览次数:1
         
        
            正在浏览:菜鸟蔡之Ajax复习第三篇(Ajax之无刷新登录)
            好了,还是和以前一样,先建一个Login.html页面吧,用于填写登录信息,然后再建一个DealData.aspx页面吧(当然,这里用一般处理程序是最好的了:*.ashx),用来处理数据用的。 
在login.html页面中其代码如下: 
复制代码 代码如下: 
<head> 
<title>无刷新登录</title> 
<script src="/UploadFiles/2021-04-02/jquery-1.4.1.js"><script type="text/javascript"> 
$(function () { 
//元素绑定全局ajaxStart事件 
$("#divMsg").ajaxStart(function () { 
$(this).show(); //显示span里面的内容 
}) 
//元素绑定全局ajaxStop事件 
$("#divMsg").ajaxStop(function () { 
$(this).html("请求处理已经完成!").hide(); 
}) 
$("#btnSure").click(function () {//点击按钮事件 
var $name = $("#txtName");//获取登录名 
var $pwd = $("#txtPwd");//获取密码 
if ($name.val() != "" && $pwd.val() != "") { 
//调用Login()方法 
Login($name.val(),$pwd.val()); 
} else { 
if ($name.val() == "") {//如果登录名不为空 
alert("登录名不能为空!"); 
$name.focus();//获取焦点 
return false; 
} else { 
alert("密码不能为空!"); 
$pwd.focus(); 
return false; 
} 
} 
}) 
}) 
function Login(name, password) { 
$.ajax({ 
type: "POST", //数据请求的方式(post或get),默认为get 
url: "DealData.aspx", //发送请求的地址(默认为当前页) 
data: "action=Login&date=" + new Date() + "&name=" + name + "&pwd=" + password,//发送到服务器的数据 
//登录成功后返回的数据 
success: function (data) { 
if (data == "True") {//根据返回值进行判断(注意:Ture写成true应该会出错吧!) 
alert("登录成功!"); 
//window.location = "1.htm";要跳转的页面 
} else { 
alert("登录名或密码错误!"); 
return false; 
} 
} 
}); 
} 
</script> 
</head> 
<body style="text-align:center"> 
<div>登录名:<input type="text" id="txtName" value="" /></div> 
<br /> 
<div>密 码:<input type="text" id="txtPwd" value="" /></div><br /> 
<div> 
<input type="reset" value="确定" id="btnSure" /> 
</div> 
<span id="divMsg" style="display:none;">正在发送请求......</span> 
</body> 
</html> 
 
在DealData.aspx中,其后台代码如下: 
复制代码 代码如下: 
public partial class ManageData : System.Web.UI.Page 
{ 
protected void Page_Load(object sender, EventArgs e) 
{ 
string name = System.Web.HttpUtility.UrlDecode(Request["name"]);//获取登录名 
string pwd = System.Web.HttpUtility.UrlDecode(Request["pwd"]);//获取密码 
Response.Write(Login(name, pwd)); 
Response.End(); 
} 
private bool Login(string name, string pwd) 
{ 
bool result = false; 
if (name == "小菜" && pwd=="123456") 
{ 
return true; 
} 
return result; 
} 
} 
 
好了,童鞋,你也赶紧的试一下吧!无刷新,你也是可以的!