菜鸟蔡之Ajax复习第三篇(Ajax之无刷新登录)

Yc杨大少

Yc杨大少

2016-02-19 10:16

今天图老师小编要向大家分享个菜鸟蔡之Ajax复习第三篇(Ajax之无刷新登录)教程,过程简单易学,相信聪明的你一定能轻松get!
好了,还是和以前一样,先建一个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 style="text-align:center"
div登录名:input type="text" id="txtName" value="" //div
br /
div密 码:input type="text" id="txtPwd" value="" //divbr /
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;
}
}

好了,童鞋,你也赶紧的试一下吧!无刷新,你也是可以的!
展开更多 50%)
分享

猜你喜欢

菜鸟蔡之Ajax复习第三篇(Ajax之无刷新登录)

Web开发
菜鸟蔡之Ajax复习第三篇(Ajax之无刷新登录)

菜鸟蔡之Ajax复习第二篇(JQuery中的load()方法实现Ajax功能)

Web开发
菜鸟蔡之Ajax复习第二篇(JQuery中的load()方法实现Ajax功能)

s8lol主宰符文怎么配

英雄联盟 网络游戏
s8lol主宰符文怎么配

AJAX架构之Dojo篇

Web开发
AJAX架构之Dojo篇

QQ密码保护第三篇

电脑入门
QQ密码保护第三篇

lol偷钱流符文搭配推荐

英雄联盟 网络游戏
lol偷钱流符文搭配推荐

《黑暗之魂》图文攻略第三篇(城外不死教区)

黑暗之魂
《黑暗之魂》图文攻略第三篇(城外不死教区)

Ajax初试之读取数据篇

Web开发
Ajax初试之读取数据篇

lolAD刺客新符文搭配推荐

英雄联盟
lolAD刺客新符文搭配推荐

手机QQ空间(WP7)软件版具备哪些功能?

手机QQ空间(WP7)软件版具备哪些功能?

如何Shrink Undo表空间,释放过度占用的空间

如何Shrink Undo表空间,释放过度占用的空间
下拉加载更多内容 ↓