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

 更新时间:2020年06月18日 17:22:21   作者:honghong.zhou  
这篇文章主要为大家详细介绍了js实现ajax的用户简单登入功能,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下

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

原生js实现ajax

html页面

<!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

<?php 
$username = $_GET['username'];
$password = $_GET['password'];

if($username == 'admin' && $password == '123'){
 echo 2;
}else{
 echo 1;
}
?>

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持脚本之家。

相关文章

  • 详解ES6系列之私有变量的实现

    详解ES6系列之私有变量的实现

    这篇文章主要介绍了详解ES6系列之私有变量的实现,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2018-11-11
  • 微信小程序实现美食展示与收藏功能

    微信小程序实现美食展示与收藏功能

    这篇文章主要介绍了如何在微信小程序中实现美食展示与收藏的功能,文中的示例代码讲解详细,感兴趣的小伙伴可以跟随小编一起动手尝试一下
    2022-03-03
  • JS获取Promise对象里面的值问题

    JS获取Promise对象里面的值问题

    这篇文章主要介绍了JS如何获取Promise对象里面的值问题,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2023-01-01
  • 利用原生JS实现data方法示例代码

    利用原生JS实现data方法示例代码

    这篇文章主要给大家介绍了关于如何利用原生JS实现data方法的相关资料,文中通过示例代码介绍的非常详细,对大家学习或者使用原生JS具有一定的参考学习价值,需要的朋友们下面来一起学习学习吧
    2019-05-05
  • JavaScript递归操作树形结构代码示例

    JavaScript递归操作树形结构代码示例

    前端树形结构一般用于网页的地理位置输入框,地理位置级联选择,人员的部门选择等,这篇文章主要给大家介绍了关于JavaScript递归操作树形结构的相关资料,需要的朋友可以参考下
    2024-01-01
  • 解析javascript系统错误:-1072896658的解决办法

    解析javascript系统错误:-1072896658的解决办法

    问题出现在用到ajax的场合。昨天还正常的程序,今天运行就有javascript系统错误:-1072896658的
    2013-07-07
  • JavaScript实现三级联动菜单实例代码

    JavaScript实现三级联动菜单实例代码

    这篇文章主要为大家详细介绍了JavaScript实现三级联动菜单实例代码,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2017-06-06
  • Javascript中的相等与不等运算

    Javascript中的相等与不等运算

    在 javascript 中,可以使用 == 来比较两个数据是否相等,如果两个数据的类型不同,那么,将在进行转换后进行比较
    2010-04-04
  • javascript代码优化的8点总结

    javascript代码优化的8点总结

    本篇文章给大家分享了关于javascript代码优化的8点总结,希望我们整理的内容能够帮助到大家。
    2018-01-01
  • js+html5实现页面可刷新的倒计时效果

    js+html5实现页面可刷新的倒计时效果

    这篇文章主要为大家详细介绍了js+html5实现页面可刷新的倒计时效果,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2017-07-07

最新评论