JQuery的ajax登录案例
1.简单版
AjaxLogin.html代码：
<head>
<title></title>
<script src="jquery-1.8.3.js" type="text/javascript"></script>
<script type="text/javascript">
$(function () {
$("#btn").click(function () {
var name = $("#name").val();
var pwd = $("#pwd").val();
$.ajax({
type: "post",
url: "AjaxLogin.ashx",
data: { name: name, pwd: pwd },
success: function (data) {
var strs = $.parseJSON(data);
if (strs.Status == "ok") {
alert(strs.Msg);
}
else if (strs.Status == "error") {
alert(strs.Msg);
}
else {
alert("服务器返回信息出错");
}
},
error: function () {
alert("登录请求失败");
}
});
});
});
</script>
</head>
<body>
<input type="text" id="name" value="" />
<input type="text" id="pwd" value="" />
<input type="button" id="btn" value="确定" />
</body>
</html>
AjaxLogin.ashx代码：
public void ProcessRequest(HttpContext context)
{
context.Response.ContentType = "text/html";
string name = context.Request["name"];
string pwd = context.Request["pwd"];
if (name == "admin" && pwd == "")
{
string json = new JavaScriptSerializer().Serialize(new { Status = "ok", Msg = "登录成功" });
context.Response.Write(json);
}
else
{
string json = new JavaScriptSerializer().Serialize(new { Status = "error", Msg = "登录失败" });
context.Response.Write(json);
}
}
2.完整版
Login.html代码：
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>登录</title>
<script src="jquery-1.5.2.js"></script>
<script type="text/javascript">
$(function () {
$("#imgValidCode").click(function () {
$("#imgValidCode").attr("src", "LoginValidCode.ashx?" + new Date());
}); $("#btnLogin").click(function () {
var username = $("#username").val();
var password = $("#password").val();
var validCode = $("#validCode").val();
$.ajax({
type: 'post', url: 'Login1.ashx', data: { username: username, password: password ,validCode:validCode},
success: function (data) {
if (data.Status == "ok") {
alert("登录成功");
}
else if (data.Status == "error") {
alert("出错啦！" + data.Msg);
}
else {
alert("服务器返回信息未知");
}
},
error: function () {
alert("登录请求失败");
}
});
});
}); </script>
</head>
<body>
<table>
<tr><td>用户名：</td><td><input type="text" id="username" /></td></tr>
<tr><td>密码：</td><td><input type="password" id="password" /></td></tr>
<tr><td><img src="LoginValidCode.ashx" id="imgValidCode" /></td><td><input type="text" id="validCode" /></td></tr>
<tr><td><input type="button" id="btnLogin" value="登录" /></td><td></td></tr>
</table>
</body>
Login.ashx代码：
public void ProcessRequest(HttpContext context)
{
context.Response.ContentType = "application/json";
string username = context.Request["username"];
string password = context.Request["password"];
string validCode = context.Request["validCode"]; //sesssion中的验证
string serverValidCode = (string)context.Session[LoginValidCode.LOGINVALIDCODE];
if (validCode != serverValidCode)
{
string json = new JavaScriptSerializer().Serialize(new { Status="error",Msg="验证码错误"});
context.Response.Write(json);
return;
}
DataTable dtUsers = SqlHelper.ExecuteQuery("select * from T_Users where UserName=@UserName",
new SqlParameter("@UserName",username));
if (dtUsers.Rows.Count <= )
{
string json = new JavaScriptSerializer().Serialize(new { Status = "error", Msg = "用户名不存在" });
context.Response.Write(json);
return;
}
if (dtUsers.Rows.Count > )
{
string json = new JavaScriptSerializer().Serialize(new { Status = "error", Msg = "系统出错，请联系管理员" });
context.Response.Write(json);
return;
}
DataRow rowUser = dtUsers.Rows[];
string dbPassword = (string)rowUser["Password"];
if (dbPassword == password)
{
string json = new JavaScriptSerializer().Serialize(new { Status = "ok", Msg = "登录成功" });
context.Response.Write(json);
}
else
{
string json = new JavaScriptSerializer().Serialize(new { Status = "error", Msg = "密码错误" });
context.Response.Write(json);
}
}
JQuery的ajax登录案例的更多相关文章
- Django（十二）视图--利用jquery从后台发送ajax请求并处理、ajax登录案例
一.Ajax基本概念 [参考]:https://www.runoob.com/jquery/jquery-ajax-intro.html 异步的javascript.在不全部加载某一个页面部的情况下, ...
- Python Django 之 基于JQUERY的AJAX 登录页面
一.基于Jquery的Ajax的实现 1.url 2.vews 3.templates
- jQuery中的ajax用法案例
什么是 AJAX? AJAX = 异步 JavaScript 和 XML(Asynchronous JavaScript and XML). 简短地说,在不重载整个网页的情况下,AJAX 通过后台加载 ...
- 用户管理的设计--4.jquery的ajax实现登录名的校验
页面效果 鼠标失去焦点时,不需要刷新页面进行校验,判断登录名是否重复. 实现步骤 1.引入struts2-json-plugin-2.5.10.1插件包 2.页面使用jquery的ajax实现后台校验 ...
- JQuery中Ajax详细参数使用案例
JQuery中Ajax详细参数使用案例 参考文档:http://www.jb51.net/shouce/jquery1.82/ 参考文档:http://jquery.cuishifeng.cn/jQu ...
- jSon和Ajax登录功能，ajax数据交互案例
ajax实例,检测用户与注册 检测用户名是否被占用: 在用户填写完用户名之后,ajax会异步向服务器发送请求,判断用户名是否存在 首先写好静态页面: index.html <!DOCTYPE h ...
- 【jQuery实例】Ajax登录页面
登录界面是信息系统提供的必备的功能,是提供给用户提供维护信息的接口.接下来,我来带领大家打造一个漂亮.安全的登录界面,使用的技术是ASP.NET+jQuery 先来看看预览效果 Ajax登录重点在 ...
- Django（十六）基于模板的登录案例：登录装饰器、csrf攻击方式及防护、ajax的Post 的csrf开启写法、生成验证码、加验证码登录、反向解析+传参
一.csrf攻击 1.1 csrf攻击(跨站请求伪造) [csrf攻击即]:通过第3方网站,伪造请求(前提条件是你已经登录正常网站,并保存了session或cookie登录信息且没有退出),第三方网站 ...
- 实现Web请求后端Api的Demo，实现是通过JQuery的AJAX实现后端请求，以及对请求到的数据的解析处理，实现登录功能
本篇实现Web请求后端Api的Demo,实现是通过JQuery的AJAX实现后端请求,以及对请求到的数据的解析处理,实现登录功能需求描述:1. 请求后端Api接口地址2. 根据返回信息进行判断处理前端 ...
随机推荐
- java中的不为空判断
String不为空判断 if(null != str && !"".equals(str)) List不为空判断 if(list!=null && ...
- 数字证书文件格式（cer和pfx）的区别
作为文件形式存在的证书一般有这几种格式: 1.带有私钥的证书 由Public Key Cryptography Standards #12,PKCS#12标准定义,包含了公钥和私钥的二进制格式的证书形 ...
- 从HashMap透析哈希表
##扯数据结构 先看一下哈希表的概念: 哈希表是一种数据结构,它可以提供快速的插入操作和查找操作.第一次接触哈希表,他会让人难以置信,因为它的插入和删除.查找都接近O(1)的时间级别.用哈希表,很多操 ...
- TCPCopy 应用
TCPCopy 使用方法 TCPCopy是一种请求复制(所有基于tcp的packets)工具,可以把在线请求导入到测试系统中去.目前此工具已经广泛应用于国内各大互联网公司. TCPCopy七大功能1) ...
- Linux samba配置
更详细的配置地址:http://www.cnblogs.com/mchina/archive/2012/12/18/2816717.html 1 安装 yum -y install samba 2 ...
- java开发微信公众平台备忘
简单记录下前段时间开发的电子书的 公众平台的一些备忘及开发心得经验等 eclipse的一些技巧: 1.ctrl+shift+o 自动添加必要import空间及移除无用import 项目备忘+说明 1. ...
- 使用C#进行图片转换格式,缩放,自动旋转,保留exif（转载）
这几天心血来潮做了一个批量图片缩放,转换格式,并且可以根据exif的信息旋转图片,校正exif信息后保存的小程序.根据配置文件 指定需要的功能. 1 2 3 4 5 6 7 8 9 10 11 12 ...
- TCP和UDP的保护消息边界机制
在socket网络程序中,TCP和UDP分别是面向连接和非面向连接的.TCP的socket编程,收发两端都要有一一成对的socket,因此,发送端为了将多个发往接收端的包,更有效的发到对方,使用了优化 ...
- HttpResponse对象
为了响应客户端的请求,同样定义了代表响应的类:HttpResponse类,它也定义在命名空间System.Web下,提供向客户端响应的方法和属性. HttpResponse常用属性和方法 响应对象用于 ...
- wes开发笔记
html中的button和submit有什么不同? submit是提交表单用,而button是执行javascript用,两者各有用处. 用到自己写按钮的时候,都是用button,submit很少写 ...