欢迎访问优讯网!
您当前的位置:首页 > 爱编程

js实现ajax的用户简单登入功能

时间:2020-06-19 13:29:07  来源:优讯网  作者:小卡司  浏览次数:
这篇文章主要为大家详细介绍了js实现ajax的用户简单登入功能,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下

本文实例为大家分享了js实现ajax的用户简单登入的具体代码,供大家参考,具体内容如下

原生js实现ajax

html页面

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
<!doctype html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>ajax登录</title>
</head>
<body>
<div>
  <div id="showInfo"></div>
  <form id="form">
    用户名:<input type="text" name="username" id="username"><br>
    密码:<input type="password" name="password" id="password">
    <input type="button" id="btn" value="登录">
  </form>
 
</div>
  <script type="text/javascript">
  window.onload = function(){
    var btn = document.getElementById('btn');
    btn.onclick = function(){
      var username = document.getElementById('username').value;
      var password = document.getElementById('password').value;
      //第一步:创建对象
      var xhr = null;
      if(window.XMLHttpRequest){
        xhr = new XMLHttpRequest();
      }else{
        xhr = new ActiveXObject("Microsoft.XMLHTTP");
      }
      //初始化
      //准备好了
      var url = './check.php?username='+username+"&password="+password;
      xhr.open('post',url,false);
 
      //这段代码在xhr.send();执行完之后才能执行
      //这件事做完了怎么办
      //事情办完之后干什么
      xhr.onreadystatechange = function(){
        if(xhr.readyState == 4){
          if(xhr.status == 200){
            alert(1);
            var data = xhr.responseText;
            if(data == 1){
              document.getElementById('showInfo').innerHTML =
'用户名或者密码错误';

            }else if(data == 2){
              document.getElementById('showInfo').innerHTML =
'登录成功';

            }
          }
        };
      }
      //实际的去做这件事
      //去做这件事情
      xhr.send(null);
      alert(2);
    }
  }
 
  </script>
</body>
</html>

check.php

1
2
3
4
5
6
7
8
9
10
<?php
$username = $_GET['username'];
$password = $_GET['password'];
 
if($username == 'admin' && $password == '123'){
  echo 2;
}else{
  echo 1;
}
?>

以上就是本文的全部内容,希望对大家的学习有所帮助

来顶一下
返回首页
返回首页

原文链接:https://www.jb51.net/article/189006.htm


推荐资讯
如何下载旧版centos iso镜像 如何下载迷你mini版的centos镜像
如何下载旧版centos i
计算机的正确使用姿势 电脑痴如何正确的使用电脑
计算机的正确使用姿势
好用的后台管理的前端框架模版H-ui H-ui框架模版分享
好用的后台管理的前端
微信电脑多开方法 无需辅助电脑版微信双开方法分享
微信电脑多开方法 无
相关文章
栏目更新
栏目热门