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

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

}

}

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

时间: 2024-10-24 23:02:23

菜鸟蔡之Ajax复习第三篇(Ajax之无刷新登录)的相关文章

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

好了,还是和以前一样,先建一个Login.html页面吧,用于填写登录信息,然后再建一个DealData.aspx页面吧(当然,这里用一般处理程序是最好的了:*.ashx),用来处理数据用的. 在login.html页面中其代码如下: 复制代码 代码如下: <head> <title>无刷新登录</title> <script src="Scripts/jquery-1.4.1.js" type="text/javascript&qu

基于jquery ajax 用户无刷新登录方法详解_jquery

Ajax框架就是提供模块化实现Ajax功能的集合,Ajax框架可以是各种语言实现的(比如SAJAX有各种语言的实现),Ajax只是jquery中的一部分, 实例1 复制代码 代码如下: $.ajax({ type:'post',//可选get url:'action.php',//这里是接收数据的PHP程序 data:'data='dsa',//传给PHP的数据,多个参数用&连接 dataType:'text',//服务器返回的数据类型 可选XML ,Json jsonp script html

基于ajax实现点击加载更多无刷新载入到本页_AJAX相关

先给大家展示效果图: 效果演示 本例是分页的另外一种显示方式,并不是隐藏未显示的内容 数据库结构与<ajax 翻页>是一样的 JavaScript 代码 <script type="text/javascript"> $(document).ready(function() { var track_click = ; //track user click on "load more" button, righ now it is click

基于jquery ajax 用户无刷新登录详解介绍

Ajax框架就是提供模块化实现Ajax功能的集合,Ajax框架可以是各种语言实现的(比如SAJAX有各种语言的实现),Ajax只是jquery中的一部分, 实例1  代码如下 复制代码 $.ajax({ type:'post',//可选get url:'action.php',//这里是接收数据的PHP程序 data:'data='dsa',//传给PHP的数据,多个参数用&连接 dataType:'text',//服务器返回的数据类型 可选XML ,Json jsonp script html

php jquery.ajax无刷新登录简单实例代码

一个很简单的应用实例,就利用了jquery.ajax来实现无刷新登录效果了,方便很简单扼要,实例也只讲了jquery应用这一圬,php教程那款就没讲了,有需要的朋友可以参考一下. <script src="js/jquery-1.4.2.js" type="text/网页特效"></script> <script language="javascript"> function test() { $.ajax({

ajax php用户无刷新登录实例

<!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> <meta http-equiv="content-

AJAX如何实现无刷新登录功能

最近学习了如何实现无刷新登录,大体的效果如下(界面比较丑,请自行忽略....): 点击登录按钮时弹出登录窗口,输入正确的用户名密码后点击登录则登录窗口关闭,状态改为当前用户名. 第一步: 首先弹出窗口使用的是jquery-ui中的控件,第一步要学会如何使用. 打开解压后的jquery-UI下的development-bundle->demos,找到index.html,选择dialog下的model dialog,右键查看源码,观察如何使用该控件,找到一句关键代码:$("#dialog-m

基于ajax实现点击加载更多无刷新载入到本页

先给大家展示效果图: 效果演示 本例是分页的另外一种显示方式,并不是隐藏未显示的内容 数据库结构与<ajax 翻页>是一样的 JavaScript 代码 <script type="text/javascript"> $(document).ready(function() { var track_click = ; //track user click on "load more" button, righ now it is click

AJAX学习之Atlas框架之定时无刷新读取数据库

ajax|定时|数据|数据库|刷新|无刷新 通过上次那个Hello,World的基本ATLAS程序的联系,对于ATLAS我们可能只有一大概的印象.那么我们有要开始实现我们的目标:定时无刷新的随机显示数据库中的一条数据和按下按钮来显示数据库中的一条数据.方式:ASP.NET的客户端控件.(我们知道ASP.NET是用服务器端控件的.客户端的控件就是以前普通的HTML表单控件.对于服务器端的实现我们在下次解决.其实我们以前的实现方式都是基于客户端的实现方式如果要与ASP.NET结合我们就要换成另外一种