js登录界面带提示 

 1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 2 <html xmlns="http://www.w3.org/1999/xhtml">
 3 <head>
 4     <title>$.ajax()方法发送请求</title>
 5     <script type="text/javascript" 
 6             src="Jscript/jquery-1.4.2-vsdoc.js">
 7     </script>
 8     <script type="text/javascript" 
 9             src="Jscript/jquery-1.4.2.js">
10     </script>
11     <style type="text/css">
12            body{font-size:13px}
13            .divFrame{width:225px;border:solid 1px #666}
14            .divFrame .divTitle{padding:5px;background-color:#eee;height:23px}
15            .divFrame .divTitle span{float:left;padding:2px;padding-top:5px;}
16            .divFrame .divContent{padding:8px;text-align:center}
17            .divFrame .divContent .clsShow{font-size:14px;line-height:2.0em}
18            .divFrame .divContent .clsShow .clsError{font-size:13px;border:solid 1px #cc3300;padding:2px;display:none;margin-bottom:5px;background-color:#ffe0a3}
19            .txt{border:#666 1px solid;padding:2px;width:150px;margin-right:3px}
20            .btn {border:#666 1px solid;padding:2px;width:50px;
21            filter: progid:DXImageTransform.Microsoft.Gradient(GradientType=0,StartColorStr=#ffffff, EndColorStr=#ECE9D8);}
22     </style>
23     <script type="text/javascript">
24         $(function() {
25             $.ajax({ //请求登录页
26                 url: "login.html", //登录静态页
27                 dataType: "html",
28                 success: function(HTML) { //返回页面内容
29                     $("#frmUserLogin").html(HTML); //将页面内容置入表单
30                     $("#btnLogin").click(function() { //“登录”按钮单击事件
31                         //获取用户名称
32                         var strTxtName = encodeURI($("#txtName").val());
33                         //获取输入密码
34                         var strTxtPass = encodeURI($("#txtPass").val());
35                         //开始发送数据
36                         $.ajax({ //请求登录处理页
37                             url: "login.aspx", //登录处理页
38                             dataType: "html",
39                             //传送请求数据
40                             data: { txtName: strTxtName, txtPass: strTxtPass },
41                             success: function(strValue) { //登录成功后返回的数据
42                                 //根据返回值进行状态显示
43                                 if (strValue == "True") {
44                                     $(".clsShow").html("操作提示，登录成功！");
45                                 }
46                                 else {
47                                     $("#divError").show().html("用户名或密码错误！");
48                                 }
49                             }
50                         })
51                     })
52                 }
53             })
54         })
55     </script>
56 </head>
57 <body>
58   <form id="frmUserLogin"></form>
59 </body>
60 </html>
View Code


login.htm

<div class="divFrame">
     <div class="divTitle">
          <span>用户登录</span>
     </div>
     <div class="divContent">
          <div class="clsShow">
               <div id="divError" class="clsError"></div>
               <div>名称：<input id="txtName" type="text" class="txt" /></div>
               <div>密码：<input id="txtPass" type="password" class="txt" /></div>
               <div>
                   <input id="btnLogin" type="button" value="登录" class="btn" />&nbsp;&nbsp
                   <input id="btnReset"  type="reset" value="取消" class="btn" />
               </div>
           </div>
      </div>
</div>
View Code

 

 

posted on 2013-07-30 22:04  三水石  阅读(416)  评论(0)    收藏  举报