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登录案例的更多相关文章

  1. Django（十二）视图--利用jquery从后台发送ajax请求并处理、ajax登录案例

    一.Ajax基本概念 [参考]:https://www.runoob.com/jquery/jquery-ajax-intro.html 异步的javascript.在不全部加载某一个页面部的情况下, ...

  2. Python Django 之 基于JQUERY的AJAX 登录页面

    一.基于Jquery的Ajax的实现 1.url 2.vews 3.templates

  3. jQuery中的ajax用法案例

    什么是 AJAX? AJAX = 异步 JavaScript 和 XML(Asynchronous JavaScript and XML). 简短地说,在不重载整个网页的情况下,AJAX 通过后台加载 ...

  4. 用户管理的设计--4.jquery的ajax实现登录名的校验

    页面效果 鼠标失去焦点时,不需要刷新页面进行校验,判断登录名是否重复. 实现步骤 1.引入struts2-json-plugin-2.5.10.1插件包 2.页面使用jquery的ajax实现后台校验 ...

  5. JQuery中Ajax详细参数使用案例

    JQuery中Ajax详细参数使用案例 参考文档:http://www.jb51.net/shouce/jquery1.82/ 参考文档:http://jquery.cuishifeng.cn/jQu ...

  6. jSon和Ajax登录功能，ajax数据交互案例

    ajax实例,检测用户与注册 检测用户名是否被占用: 在用户填写完用户名之后,ajax会异步向服务器发送请求,判断用户名是否存在 首先写好静态页面: index.html <!DOCTYPE h ...

  7. 【jQuery实例】Ajax登录页面

    登录界面是信息系统提供的必备的功能,是提供给用户提供维护信息的接口.接下来,我来带领大家打造一个漂亮.安全的登录界面,使用的技术是ASP.NET+jQuery 先来看看预览效果   Ajax登录重点在 ...

  8. Django（十六）基于模板的登录案例：登录装饰器、csrf攻击方式及防护、ajax的Post 的csrf开启写法、生成验证码、加验证码登录、反向解析+传参

    一.csrf攻击 1.1 csrf攻击(跨站请求伪造) [csrf攻击即]:通过第3方网站,伪造请求(前提条件是你已经登录正常网站,并保存了session或cookie登录信息且没有退出),第三方网站 ...

  9. 实现Web请求后端Api的Demo，实现是通过JQuery的AJAX实现后端请求，以及对请求到的数据的解析处理，实现登录功能

    本篇实现Web请求后端Api的Demo,实现是通过JQuery的AJAX实现后端请求,以及对请求到的数据的解析处理,实现登录功能需求描述:1. 请求后端Api接口地址2. 根据返回信息进行判断处理前端 ...

随机推荐

  1. java中静态属性和和静态方法的继承问题 以及多态的实质

    首先结论是:java中静态属性和和静态方法可以被继承,但是没有被重写(overwrite)而是被隐藏. 静态方法和属性是属于类的,调用的时候直接通过类名.方法名完成的,不需继承机制就可以调用如果子类里 ...

  2. 将ECSHOP会员注册页面的Email修改成非必填项

    将ECSHOP会员注册页面的Email修改成非必填项 ECSHOP教程/ ecshop教程网(www.ecshop119.com) 2011-07-29   有人说,在后台的 “会员注册项设置 ”里面 ...

  3. 解决Surface Pro外接移动硬盘经常睡眠的问题

    1. 打开注册表,找到下面的键 HKEY_LOCAL_MACHINE\SYSTEM\CurrentControlSet\Control\Power\PowerSettings\0012ee47-904 ...

  4. JS面试题及答案总结

    1. 截取字符串abcdefg的efg  <div id="test">abcdefg</div> var mytext=document.getEleme ...

  5. C语言绘制余弦函数图象

    #include"stdio.h" #include"math.h" void main() { double y; int x,m; for(y=1;y> ...

  6. ios开发 网络编程浅析（一）

    iphone包含了很多框架和库,从底层的套接字到不同层次的封装,可以方便地给程序添加网络功能. (1)BSD套接字.最底层的套接字,这是Unix网络开发常用的API.如果从其他系统移植程序,而程序用的 ...

  7. [Asp.Net]状态管理（ViewState、Cookie）

    简介 HTTP协议是无状态的.从客户端到服务器的连接可以在每个请求之后关闭.但是一般需要把一些客户端信息从一个页面传送给另一个页面. 无状态的根本原因是:浏览器和服务器使用Socket通信,服务器将请 ...

  8. MSN

    msn (微软软件) 编辑 MSN,全称Microsoft Service Network,是微软公司(Microsoft)旗下的门户网站. MSN(门户网站)提供包括必应搜索.文娱.健康.理财.汽车 ...

  9. http 超文本传输协议

    超文本传输协议(HTTP,HyperText Transfer Protocol)是互联网上应用最为广泛的一种网络协议.所有的WWW文件都必须遵守这个标准.设计HTTP最初的目的是为了提供一种发布和接 ...

  10. Swift学习笔记

    swift 面向过程 数据结构 3.1 常量和变量 定义常量和变量 let a = 1 var b = 2 显式定义和隐式定义 无需指定强类型,编译器会自动根据初始值推断出其类型.与c#相似.如果在定 ...