（转）jquery实现无刷新登录

为了防止以后好久不用生疏，在这里记下，供刚开始学习jquery的童鞋们借鉴，我也是刚开始学jquery，有什么写的不对的地方，还请大家指出错误，共同进步。

好了，唠嗑就到这里，现在看如何用jquery实现无刷新登录。

首先先创建html的部分

<table>
        <tr>
            <td>
                用户名：
            </td>
            <td>
                <input type="text" id="username" />
            </td>
        </tr>
        <tr>
            <td>
                密码：
            </td>
            <td>
                <input type="text" id="password" />
            </td>
        </tr>
        <tr>
            <td>
                验证码：
            </td>
            <td>
                <input type="text" id="cord" />
                <img alt="点击更换验证码" title="看不清楚，请单击我！" id="checkcord" src="img.ashx" />
            </td>
        </tr>
        <tr>
            <td>
                <input type="button" onclick="login();" value="登录" />
            </td>
            <td>
            </td>
        </tr>
    </table>

　　

这里面包含的功能有：登录的验证，点击更换验证码。这个没有什么好说的。

下面是jquery的部分

 <script src="Scripts/jquery-1.4.1.min.js" type="text/javascript"></script>-----------别忘了引用这个链接，否则jquery不能用
    <script type="text/javascript">
        //用jquery实现无刷新的登录验证
        function login() {
            $.ajax({
                url: 'Login.ashx', //访问路径
                data: 'username=' + $("#username").val() + "&password=" + $("#password").val() + "&cord=" + $("#cord").val(), //需要验证的参数
                type: 'post', //传值的方式
                error: function () {//访问失败时调用的函数
                    alert("链接服务器错误！");
                },
                success: function (msg) {//访问成功时调用的函数,这里的msg是Login.ashx返回的值
                    alert(msg);
                }
            });
        }

        //验证码图片
        $(function () {
            $("#username").focus();
            $("#checkcord").click(function () {
                $("#checkcord").attr("src", "img.ashx?time=" + new Date());
            });
        })
        
    </script>

　　

大概的核心代码就是这些了，当用户点击登录按钮时，触发login事件，用jquery向Login.ashx发出请求，在Login.ashx当中，仅仅只是验证用户名和密码是否匹配，验证码是否正确。Login.ashx是用C#语言写的，如果你们学习的是别的语言就将地址更换为别的就可以了。

img.ashx是生成验证码的程序，每点击一次图片都会重新访问img.ashx，所以图片是更换的，在生成图片的时候，会生成存储验证码的session，在Login.ashx当中，判断用户输入的值和session的值是否相同就可以了。在这里我只显示主要的源码了。

context.Response.ContentType = "text/plain"; 
       string username = context.Request.Form["username"]; 
       string password = context.Request.Form["password"]; 
       string cord = context.Request.Form["cord"]; 
       if (context.Session["cord"] != null) 
       { 
           if (context.Session["cord"].ToString() == cord) 
           { 
               if (username == "admin" && password == "admin") 
               { 
                   context.Response.Write("登录成功！"); 
               } 
               else
               { 
                   context.Response.Write("登录失败！用户名和密码错误!"); 
               } 
           } 
           else
           { 
               context.Response.Write("验证码错误！"); 
           }  
       }

　　

这是判断登录的代码。

好了，以上就是核心代码，希望大家多多指教。也希望我的笔记对您有用

原文地址：http://www.cnblogs.com/yinzihui/archive/2011/08/05/2128701.html