AJAX实现异步登录

时间:2015-11-20 21:31:10   收藏:0   阅读:150

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

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

 

原文:http://www.cnblogs.com/aasd147789/p/4982192.html

评论(0
© 2014 bubuko.com 版权所有 - 联系我们:wmxa8@hotmail.com
打开技术之扣,分享程序人生!