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


Posted in Javascript onJune 18, 2020

本文实例为大家分享了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;
}
?>

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

Javascript 相关文章推荐
JQuery Tips(3) 关于$()包装集内元素的改变
Dec 14 Javascript
JS 操作符整理[推荐收藏]
Nov 15 Javascript
js string 转 int 注意的问题小结
Aug 15 Javascript
jQuery在iframe中无法弹出对话框的解决方法
Jan 12 Javascript
jquery选择器原理介绍($()使用方法)
Mar 25 Javascript
jQuery焦点图插件SaySlide
Dec 21 Javascript
基于JS判断iframe是否加载成功的方法(多种浏览器)
May 13 Javascript
JQuery.validate在ie8下不支持的快速解决方法
May 18 Javascript
Javascript中indexOf()和lastIndexOf应用方法实例
Aug 24 Javascript
vue-router相关基础知识及工作原理
Mar 16 Javascript
vue中使用input[type=&quot;file&quot;]实现文件上传功能
Sep 10 Javascript
vue+canvas实现移动端手写签名
May 21 Javascript
JS实现躲避粒子小游戏
Jun 18 #Javascript
html-webpack-plugin修改页面的title的方法
Jun 18 #Javascript
vue实现购物车结算功能
Jun 18 #Javascript
vue-cli4.x创建企业级项目的方法步骤
Jun 18 #Javascript
javascript实现文字跑马灯效果
Jun 18 #Javascript
node.js +mongdb实现登录功能
Jun 18 #Javascript
VSCode launch.json配置详细教程
Jun 18 #Javascript
You might like
PHP array 的加法操作代码
2010/07/24 PHP
异步加载技术实现当滚动条到最底部的瀑布流效果
2014/09/16 PHP
Zend Framework实现多文件上传功能实例
2016/03/21 PHP
php执行多个存储过程的方法【基于thinkPHP】
2016/11/08 PHP
PHP从零开始打造自己的MVC框架之路由类实现方法分析
2019/06/03 PHP
javascript 不间断的图片滚动并可点击
2010/01/15 Javascript
用Jquery.load载入页面实现局部刷新
2014/01/22 Javascript
Node.js 去掉种子(torrent)文件里的邪恶信息
2015/03/27 Javascript
JavaScript中的setMilliseconds()方法使用详解
2015/06/11 Javascript
jQuery+ajax读取并解析XML文件的方法
2016/09/09 Javascript
js实现获取鼠标当前的位置
2016/12/14 Javascript
jQuery操作json常用方法示例
2017/01/04 Javascript
jQuery animate()实现背景色渐变效果的处理方法【使用jQuery.color.js插件】
2017/03/15 Javascript
JavaScript之Map和Set_动力节点Java学院整理
2017/06/29 Javascript
jQuery除指定区域外点击任何地方隐藏DIV功能
2017/11/13 jQuery
使用Vue完成一个简单的todolist的方法
2017/12/01 Javascript
vue.js与后台数据交互的实例讲解
2018/08/08 Javascript
Vue 列表上下过渡效果的实例代码
2019/06/25 Javascript
使用JS location实现搜索框历史记录功能
2019/12/23 Javascript
[02:42]完美大师赛主赛事淘汰赛第三日观众采访
2017/11/25 DOTA
[00:32]2018DOTA2亚洲邀请赛Secret出场
2018/04/03 DOTA
[01:59]翻天覆地,因你而变,7.20版本地图更新速览
2018/11/24 DOTA
Python通过OpenCV的findContours获取轮廓并切割实例
2018/01/05 Python
Python三种遍历文件目录的方法实例代码
2018/01/19 Python
Python之批量创建文件的实例讲解
2018/05/10 Python
Python3实现将本地JSON大数据文件写入MySQL数据库的方法
2018/06/13 Python
10 分钟快速入门 Python3的教程
2019/01/29 Python
python3实现绘制二维点图
2019/12/04 Python
浅谈django channels 路由误导
2020/05/28 Python
Python csv文件记录流程代码解析
2020/07/16 Python
美国环保婴儿用品公司:The Honest Company
2017/11/23 全球购物
应用化学专业职业生涯规划书
2013/12/31 职场文书
安全生产月宣传标语
2014/10/06 职场文书
后天观后感
2015/06/08 职场文书
投诉信回复范文
2015/07/03 职场文书
2016年小学“感恩教师”主题队日活动总结
2016/04/01 职场文书