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 相关文章推荐
Array.prototype.slice 使用扩展
Jun 09 Javascript
Js 获取Gridview选中行的内容操作步骤
Feb 05 Javascript
js实现仿微博滚动显示信息的效果
Dec 21 Javascript
angular-ngSanitize模块-$sanitize服务详解
Jun 13 Javascript
再谈Angular4 脏值检测(性能优化)
Apr 23 Javascript
Angular中sweetalert弹框的基本使用教程
Jul 22 Javascript
在 Angular6 中使用 HTTP 请求服务端数据的步骤详解
Aug 06 Javascript
Vue使用NPM方式搭建项目
Oct 25 Javascript
javascript 使用sleep函数的常见方法详解
Apr 26 Javascript
详细分析Node.js 模块系统
Jun 28 Javascript
vue-router 按需加载 component: () =&gt; import() 报错的解决
Sep 22 Javascript
解决vue elementUI 使用el-select 时 change事件的触发问题
Nov 17 Vue.js
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将字符串首字母大小写转换的实例
2017/01/21 PHP
PHP基于堆栈实现的高级计算器功能示例
2017/09/15 PHP
PHP框架Laravel中使用UUID实现数据分表操作示例
2018/05/30 PHP
php+lottery.js实现九宫格抽奖功能
2019/07/21 PHP
PHP实现计算器小功能
2020/08/28 PHP
jQuery弹出(alert)select选择的值
2013/04/21 Javascript
JS实现判断碰撞的方法
2015/02/11 Javascript
jQuery+json实现的简易Ajax调用实例
2015/12/14 Javascript
javascript实现的猜数小游戏完整实例代码
2016/05/10 Javascript
基于JQuery的购物车添加删除以及结算功能示例
2017/03/08 Javascript
yii form 表单提交之前JS在提交按钮的验证方法
2017/03/15 Javascript
JavaScript函数柯里化原理与用法分析
2017/03/31 Javascript
微信小程序实现点击按钮修改字体颜色功能【附demo源码下载】
2017/12/05 Javascript
vue-cli 如何打包上线的方法示例
2018/05/08 Javascript
vue.js做一个简单的编辑菜谱功能
2018/05/08 Javascript
layui点击导航栏刷新tab页的示例代码
2018/08/14 Javascript
详解js根据百度地图提供经纬度计算两点距离
2019/05/13 Javascript
JS实现从对象获取对象中单个键值的方法示例
2019/06/05 Javascript
vue解决花括号数据绑定不成功的问题
2019/10/30 Javascript
vue添加锚点,实现滚动页面时锚点添加相应的class操作
2020/08/10 Javascript
用python实现的可以拷贝或剪切一个文件列表中的所有文件
2009/04/30 Python
python实现爬虫下载漫画示例
2014/02/16 Python
Linux下远程连接Jupyter+pyspark部署教程
2019/06/21 Python
python可迭代对象去重实例
2020/05/15 Python
Python之京东商品秒杀的实现示例
2021/01/06 Python
用HTML5的canvas实现一个炫酷时钟效果
2016/05/20 HTML / CSS
德国知名健康零食网上商店:Seeberger
2017/07/27 全球购物
Viking Direct爱尔兰:办公用品和家具
2019/11/21 全球购物
DJI全球:DJI Global
2021/03/15 全球购物
名词解释型面试题(主要是网络)
2013/12/27 面试题
应届生服装设计自我评价
2013/09/20 职场文书
工程业务员工作职责
2013/12/07 职场文书
医学生临床实习自我评价
2014/03/07 职场文书
调查研究项目计划书
2014/04/29 职场文书
机关作风建设心得体会
2014/10/22 职场文书
vue3 自定义图片放大器效果的示例代码
2022/07/23 Vue.js