菜鸟蔡之Ajax复习第三篇(Ajax之无刷新登录)_AJAX相关教程-查字典教程网
菜鸟蔡之Ajax复习第三篇(Ajax之无刷新登录)
菜鸟蔡之Ajax复习第三篇(Ajax之无刷新登录)
发布时间:2016-12-29 来源:查字典编辑
摘要:好了,还是和以前一样,先建一个Login.html页面吧,用于填写登录信息,然后再建一个DealData.aspx页面吧(当然,这里用一般处...

好了,还是和以前一样,先建一个Login.html页面吧,用于填写登录信息,然后再建一个DealData.aspx页面吧(当然,这里用一般处理程序是最好的了:*.ashx),用来处理数据用的。

在login.html页面中其代码如下:

复制代码 代码如下:

<head>

<title>无刷新登录</title>

<script src="Scripts/jquery-1.4.1.js" type="text/javascript"></script>

<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>

<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">正在发送请求......</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;

}

}

好了,童鞋,你也赶紧的试一下吧!无刷新,你也是可以的!

相关阅读
推荐文章
猜你喜欢
附近的人在看
推荐阅读
拓展阅读
  • 大家都在看
  • 小编推荐
  • 猜你喜欢
  • 最新AJAX相关学习
    热门AJAX相关学习
    编程开发子分类