菜鸟蔡之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;
}
}

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

赞 (0)

相关推荐

  • jQuery.ajax 用户登录验证代码

    复制代码 代码如下: $.ajax({ type: "post", url: "Handler1.ashx", data: { username: "admin", password: "123" }, success: successHandle }); function successHandle(rep) { $("#msg").html(rep); }

  • div弹出层的ajax登录(Jquery版+c#)

    div弹出层的ajax登录(Jquery版+c#)

    页面初始化,界面如图所示: Server name文本框获取焦点时候,界面如图所示(这里可以改成你登录的验证码): 可以加载SQL Server服务列表,也是我的简易SQL查询分析器评论中静夜妙思给予的方法,非常感谢! 加载列表如下图所示: 可以随意地点击添加到Server name中,登录时截图所示: 文本框验证都写好了!还有Authentication验证方式,windows验证下面Login,Password文本框禁掉!由于时间原因,不上图了 demo.html(全部前台代码,js/css

  • jQuery+Ajax用户登录功能的实现

    jQuery+Ajax用户登录功能的实现

    ok,先来贴几张张效果图. 其中大致流程是用户点击页面右上角的登录链接接着弹出div模拟窗口,该窗口通过iframe调用Login.aspx页面,用户输入用户名 密码和验证码后,Login.aspx页面的jQuery代码post到Login.ashx页面处理,Login.ashx页面可以算是简易的aspx页面吧. 当然你用LoginProcess.aspx 也是可以的.Login.ashx页面处理完把结果返回给Login.aspx页面处理,result变量用与接收结果. 如果返回1表示登录成功,

  • ajax 登录功能简单实现(未连接数据库)

    简单的登录功能(未连接数据库) 复制代码 代码如下: <script src="Jquery1.7.js" type="text/javascript"></script> <script type="text/javascript"> $(function () { $('#tijiao').click(function () { var username = $('#username').val(); va

  • S2SH整合JQuery+Ajax实现登录验证功能实现代码

    不多说了,上码 action 复制代码 代码如下: package com.lk.action; import javax.annotation.Resource; import com.googlecode.jsonplugin.annotations.JSON; import com.lk.service.StudentControl; import com.opensymphony.xwork2.ActionSupport; public class LoginAjaxAction ext

  • 一步一步学asp.net Ajax登录设计实现解析

    一步一步学asp.net Ajax登录设计实现解析

    任务需求:做一个登录,拥有自动记住账号和密码的功能,要保证安全性,ajax,无刷新,良好的用户体验.(母板页) 这是前台页面,要求实现用户登录 首先我们分析, 用户需求: 1. 登录以后,登录框隐藏,并且欢迎登录的框显示,并且,左上角登录的按钮消失,安全退出显示. 2. 如果选择记住帐号和密码,下次登录直接登录,并且保证安全性. 实现过程: 首先,登录的时候发出ajax请求,用户验证登录,登录以后,保存当前用户名和密码到cookies中,注意,密码要用md5加密,md5是根据用户的机器配置生成的

  • 使用PHPRPC实现Ajax安全登录第1/2页

    PHPRPC 与其它 ajax 框架不同,PHPRPC 遵循的是"只做一件事,并把它做好"的原则.它只负责数据传输,并且将传输做到最好!它将你以前用传统的 ajax 方式做不到或者很难做到的事情变得轻而易举! 相信好多人选择 PHPRPC 的一个主要原因就是它能够让你开发 ajax 应用变得更加容易!尽管 PHPRPC 的强大之处不仅限于此,但我不得不承认,这确实是 PHPRPC 的一大亮点! 所以,我们的第一站,就来看看如何用 PHPRPC 3.0 来编写 ajax 应用吧. 下 面

  • 基于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

  • jquery ajax 登录验证实现代码

    使用 jquery 框架:下载 jquery.js 新建一个 web 工程 ajax : 在 webRoot 下新建一个 jslib 文件夹:专门存放 js 文件: 在 webRoot 下新建一个 html/jsp 页面: login.html 复制代码 代码如下: <script type = "text/javascript" src = "jslib/jquery.js"></ script> <script type = &qu

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

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

  • 基于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

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

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

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

  • 编写轻量ajax组件第三篇实现

    通过之前的介绍,我们知道要执行页面对象的方法,核心就是反射,是从请求获取参数并执行指定方法的过程.实际上这和asp.net mvc框架的核心思想很类似,它会解析url,从中获取controller和action名称,然后激活controller对象,从请求获取action参数并执action.在web form平台上,我们把方法写在.aspx.cs中,要实现的就是在页面对象还未生成的情况下,执行指定的方法,然后返回结果. 我们先看实现后几个调用例子,这些功能也可以组合使用: [AjaxMetho

  • asp.net+jquery ajax无刷新登录的实现方法

    因为工作需要研究了一下 js的ajax,下面是成果.主要是三部分:一.js部分 友情提示注意js部分中的 $("#btn_login")中的return false:这个可以阻止回转服务器不然还是会刷新 复制代码 代码如下: $(document).ready(function () {    $("#btn_login").click(function () {        postlogin();        return false;    });});

  • jQuery+Ajax实现无刷新操作

    使用jQuery实现Ajax操作        想要实现Ajax页面无刷新效果,但是直接利用Ajax代码实在有些麻烦,所以就想用jQuery实现.jQuery很好的封装了Ajax的核心对象XMLHTTPRequest.所以用起来非常方便.        首先,创建服务器端代码,这里用Servlet实现服务器端的数据处理:代码如下: protected void doPost(HttpServletRequest req, HttpServletResponse resp) throws Serv

  • Bootstrap Paginator分页插件与ajax相结合实现动态无刷新分页效果

    Bootstrap Paginator分页插件与ajax相结合实现动态无刷新分页效果

    Bootstrap Paginator分页插件下载地址: DownloadVisit Project in GitHub 1.这是需要分页的页面放的 js函数: <span style="font-size:14px;">function paging(page){ $.ajax({ type: "GET", url: "${ctx}/api/v1/user/1/"+(page-1)+"/5", dataType:

  • 分页技术原理与实现之无刷新的Ajax分页技术(三)

    紧接着上篇-分页技术原理与实现之Java+Oracle代码实现分页(二),本篇继续分析分页技术.上篇讲的是分页技术的代码实现,这篇继续分析一下分页技术的效果控制. 上篇已经用代码简单的实现了一个分页.但是我们都看到,代码中每次通过servlet请求取得结果集后,都会转向到一个jsp页面显示结果,这样每次查询页面都会刷新一下,比如查询出现结果集后要查看第三页,页面就会刷新一下.这样页面给人的效果感觉就会有点不舒服,所以我们希望能够在通过条件查询结果集后无论访问哪一页,页面都不会刷新,而只是结果集变

  • AJAX初体验之实战篇——打造博客无刷新搜索

    AJAX初体验之实战篇——打造博客无刷新搜索

    如果你对AJAX不是很了解,可以先看看这篇教程的前篇<AJAX初体验之上手篇>. 现在博客很流行,相信应该上网时间稍微长点的朋友都会在这或者在那的有一个自己的博客.对于一些有一定能力的朋友,可能更喜欢自己去下载一个博客程序来架设一个自己的博客,而不是使用一些博客网站提供的服务.而大部分博客程序所带的搜索功能是提交查询关键字到搜索页面,然后在后台生成搜索结果,再呈现给用户,这过程之中浪费了一些带宽,如博客的侧边栏.要节约这一些带宽,我们可以用AJAX来打造自己的无刷新日志搜索. 在本篇教程中,数

随机推荐