首页 > web前端 > js教程 > AJAX实现不刷新登录

AJAX实现不刷新登录

php中世界最好的语言
发布: 2018-04-02 16:31:50
原创
1894 人浏览过

这次给大家带来AJAX实现不刷新登录,AJAX实现不刷新登录的注意事项有哪些,下面就是实战案例,一起来看一下。

最近学习了如何实现无刷新登录,大体的效果如下(界面比较丑,请自行忽略....):

点击登录按钮时弹出登录窗口,输入正确的用户名密码后点击登录则登录窗口关闭,状态改为当前用户名.

第一步:

首先弹出窗口使用的是jquery-ui中的控件,第一步要学会如何使用.

打开解压后的jquery-UI下的development-bundle->demos,找到index.html,选择dialog下的model dialog,右键查看源码,观察如何使用该控件,找到一句关键代码:$("#dialog-modal").dialog({height: 140,modal: true});这是用于显示的,打开model message中的源码,找到关闭的关键代码:$(this).dialog('close');有了这两句代码,可以控制窗口的显示与关闭,可以进行下一步了.使用时需复制jquery-ui开发包的css文件夹,js文件夹到项目中.

第二步:

在这里先贴出处理AJAX请求的一般处理程序的代码,虽然正真写的时候都是用到再写,但这里不可能一步一步详细列出,为了便于理解,先将一般处理程序代码贴出来:

1.IsLogin.ashx,用于判断用户是否登录,登录则返回用户名.这里注意,在一般处理程序中要使用session,必须引入using System.Web.SessionState且要实现IRequiresSessionState接口

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

using System;

using System.Collections.Generic;

using System.Linq;

using System.Web;

using System.Web.SessionState;

namespace AJAX无刷新登录.AJAX

{

 /// <summary>

 /// IsLogin 的摘要说明

 /// </summary>

 public class IsLogin : IHttpHandler,IRequiresSessionState

 {

  public void ProcessRequest(HttpContext context)

  {

   context.Response.ContentType = "text/plain";

   if (context.Session["userName"] != null)

   {

    string userName = context.Session["userName"].ToString();

    context.Response.Write("yes|"+userName);

   }

   else

   {

    context.Response.Write("no");

   }

  }

  public bool IsReusable

  {

   get

   {

    return false;

   }

  }

 }

}

登录后复制

2.CheckLogin.ashx,用于检测用户输入用户名密码是否匹配,正确则返回yes,错误返回no,这里为了简便没有连接数据库.

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

35

36

using System;

using System.Collections.Generic;

using System.Linq;

using System.Web;

using System.Web.SessionState;

namespace AJAX无刷新登录.AJAX

{

 /// <summary>

 /// CheckLogin 的摘要说明

 /// </summary>

 public class CheckLogin : IHttpHandler,IRequiresSessionState

 {

  public void ProcessRequest(HttpContext context)

  {

   context.Response.ContentType = "text/plain";

   string userName = context.Request["userName"];

   string password=context.Request["password"];

   if (userName=="admin"&&password=="admin")

   {

    context.Session["userName"] = "admin";

    context.Response.Write("ok");

   }

   else

   {

    context.Response.Write("no");

   }

  }

  public bool IsReusable

  {

   get

   {

    return false;

   }

  }

 }

}

登录后复制

3.LoginOut.ashx,用于控制用户登出,设置session为空.

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

using System;

using System.Collections.Generic;

using System.Linq;

using System.Web;

using System.Web.SessionState;

namespace AJAX无刷新登录.AJAX

{

 /// <summary>

 /// LoginOut 的摘要说明

 /// </summary>

 public class LoginOut : IHttpHandler,IRequiresSessionState

 {

  public void ProcessRequest(HttpContext context)

  {

   context.Response.ContentType = "text/plain";

   context.Session["userName"] = null;

  }

  public bool IsReusable

  {

   get

   {

    return false;

   }

  }

 }

}

登录后复制

一般处理程序就结束了,下面贴出主界面的代码:

1

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Login.aspx.cs" Inherits="AJAX无刷新登录.Login" %>

登录后复制

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

35

36

37

38

39

40

41

42

43

44

45

46

47

48

49

50

51

52

53

54

55

56

57

58

59

60

61

62

63

64

65

66

67

68

69

70

71

72

73

74

75

76

77

78

79

80

81

82

83

84

85

86

87

88

89

90

91

92

93

94

95

96

97

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">

<head runat="server">

 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

 <title></title>

 <link href="JQueryUI/css/ui-lightness/jquery-ui-1.8.2.custom.css" rel="stylesheet" />

 <script src="JQueryUI/jquery-1.4.2.min.js"></script>

 <script src="JQueryUI/jquery-ui-1.8.2.custom.min.js"></script>

 <script type="text/javascript">

  //判断是否登录,登录则显示登录名,隐藏登录按钮,显示注销按钮

  //否则相反

  var isLogin = function () {

   $.post("/AJAX/IsLogin.ashx"function (data) {

    var strs = data.split('|');

    if (strs[0] == "yes") {

     $("#pShowLogin").hide();

     $("#pShowLoginOut").show();

     $("#spanName").text(strs[1]);

    else {

     $("#pShowLogin").show();

     $("#pShowLoginOut").hide();

     $("#spanState").text("未登录");

    }

   });

  }

  $(function () {

   isLogin();

   //点击登录弹出登录窗口

   $("#btnShowLogin").click(function () {

    //模态窗口,设定长宽

    $("#pLogin").dialog({

     height: 160,

     width: 300,

     modal: true

    });

   });

   //点击取消则关闭弹出框

   $("#btnCancel").click(function () {

    $("#pLogin").dialog('close');

   });

   //点击登录发送post请求在一般处理程序CheckLogin.ashx中验证登录,

   //根据回调函数结果判断是否登录成功

   $("#btnLogin").click(function () {

    var userName = $("#txtUserName").val();

    var password = $("#txtPwd").val();

    $.post("/AJAX/CheckLogin.ashx", { "userName": userName, "password": password }, function (data) {

     if (data == "ok") {

      $("#pLogin").dialog('close');

      isLogin();

     }

     else {

      alert("用户名或密码错误");

     }

    });

   });

   //点击注销发送post请求,在一般处理程序中设置session为null,并调用isLogin函数刷新状态

   $("#btnExit").click(function () {

    $.post("/AJAX/LoginOut.ashx"function () {

     isLogin();

    });

   });

  });

 </script>

</head>

<body>

 <form id="form1" runat="server">

  <p id="pShowLogin" style="display: none">

   <span id="spanState"></span>

   <input type="button" value="登录" id="btnShowLogin" />

  </p>

  <p id="pShowLoginOut" style="display: none">

   <span id="spanName"></span>

   <input type="button" value="注销" id="btnExit" />

  </p>

  <p id="pLogin" title="登录窗口" style="display: none">

   <table style="text-align: left" id="tbLoin">

    <tr>

     <td>用户名:</td>

     <td>

      <input type="text" id="txtUserName" /></td>

    </tr>

    <tr>

     <td>密码:</td>

     <td>

      <input type="password" id="txtPwd" /></td>

    </tr>

    <tr>

     <td>

      <input type="button" value="登录" id="btnLogin" /></td>

     <td style="text-align: left">

      <input type="button" value="取消" id="btnCancel" /></td>

    </tr>

   </table>

  </p>

 </form>

</body>

</html>

登录后复制

相信看了本文案例你已经掌握了方法,更多精彩请关注php中文网其它相关文章!

推荐阅读:

ajax怎样实现bootstrap模态框分页查询功能

Ajax跨域访问时Cookie丢失怎么解决

Ajax与$.ajax的使用方法

以上是AJAX实现不刷新登录的详细内容。更多信息请关注PHP中文网其他相关文章!

相关标签:
本站声明
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn
热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板