小云熊

AJAX实现异步登录

//代码较为简单，只是测试所用

1.html登录页面代码

 1 <table>
 2         <tr>
 3             <td>用户名:</td>
 4             <td><input id="userName" type="text" /></td>
 5         </tr>
 6         <tr>
 7             <td>密码:</td>
 8             <td><input id="password" type="text" /></td>
 9         </tr>
10         <tr>
11             <td><input id="btnLogin" type="button" value="登录" /></td>
12         </tr>
13     </table>
View Code

2.js代码

 1 <script src="Content/Ajax.js" type="text/javascript"></script>
 2     <!--<script src="Content/jquery-1.9.1.min.js"></script>-->
 3     <script type="text/javascript">
 4         //初始化
 5         window.onload=function(){
 6             var btnLogin = document.getElementById("btnLogin");
 7             //为登录按钮添加事件
 8             btnLogin.onclick=function(){
 9                 Login();
10             };
11 
12         }
13         function Login(){
14             var userName=document.getElementById("userName");
15             var password = document.getElementById("password");
16             //javascript版
17             Ajax({
18                 type: "POST",
19                 url: "LoginHandler.ashx",
20                 data: "userName="+userName.value+"&password="+password.value,
21                 dataType:"text",
22                 
23                 success: function (data) {
24                     alert(data);
25                 }
26             });
27             //jquery版
28             $.ajax({
29                 type: "POST",
30                 url: "LoginHandler.ashx",
31                 data: { userName: $("#userName").val(), passWord: $("#password").val() },
32                 dataType:"text",
33                 success: function (data) {
34                     alert(data);
35                 }
36             });
37             
38         }
39     </script>
View Code

 

posted on 2015-11-20 19:48  小云熊  阅读(557)  评论(0)    收藏  举报