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

2016-02-19 10:16 5 1 收藏

今天图老师小编要向大家分享个菜鸟蔡之Ajax复习第三篇(Ajax之无刷新登录)教程,过程简单易学,相信聪明的你一定能轻松get!

【 tulaoshi.com - Web开发 】

好了,还是和以前一样,先建一个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;
}
}

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

来源:http://www.tulaoshi.com/n/20160219/1594030.html

延伸阅读
标签: Web开发
在此之前我们需要做一下简单的ajax准备工作,但你必须要具备基本的html,javascript,dom编写能力.否则这个ajax教程你读起来会很吃力.我的目的是通过这份教程.可以让你在你的网页中使用ajax技术实现,读取,添加,修改,删除数据的操作.也许你是只老鸟对我写的这些不屑一顾,但我还是希望你能看 下该教程中演示的一些例子,没准会有地方吸引你...
标签: Web开发
DWR(Direct Web Remoting)是一个WEB远程调用框架.利用这个框架可以让AJAX开发变得很简单.利用DWR可以在客户端利用JavaScript直接调用服务端的Java方法并返回值给JavaScript就好像直接本地客户端调用一样(DWR根据Java类来动态生成JavaScrip代码).它的最新版本DWR0.6添加许多特性如:支持Dom Trees的自动配置,支持Spring(JavaScript...
X360《死亡街区》流程攻略第三篇 Episode 3:Modern Home 本关玩家仅能操控童子军来进行游戏,碍于童子军的修缮能力与攻击能力都非常低,因此玩家要随时注意窗户上的木板要维持在二条以上才比较安全,特别是图示三位置游泳池旁的窗户,只要稍不小心就会让僵尸偷溜进来了。值得一提的是,游戏起始处的房间里,设有一个紫色的补血贩卖机,若...
标签: Web开发
做公司网站时的一个应用,用猫东的表单验证插件做实时的验证,和jquery的ajax提交数据,获取评论的时候加入简单的分页 原理很简单,注意一下编码问题就行了 实现了获取评论无刷新,发表评论无刷新,页面获取评论时显示loading加载效果 jquery真的是一个非常优秀的JS库,简单容易掌握,对于网页中的多级菜单、级联效果、Tab...
标签: Web开发
将index.html和upload.php文件保存到apache工作目录,例子使用安装目录D:/Program Files/Apache Software Foundation/Apache2.2/htdocs/ AJAX 客户端页面代码: index.html html  body  h1Ajax file upload sample/h1br/input id="uplaod" name="btn_send" type="button" value="上传测试"/  div id=result/div  PRE...

经验教程

982

收藏

75
微博分享 QQ分享 QQ空间 手机页面 收藏网站 回到头部