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 相关文章推荐
JavaScript 选中文字并响应获取的实现代码
Aug 28 Javascript
Checbox的操作含已选、未选及判断代码
Nov 07 Javascript
js键盘上下左右键怎么触发function(实例讲解)
Dec 14 Javascript
在javascript中随机数 math random如何生成指定范围数值的随机数
Oct 21 Javascript
JavaScript事件处理的方式(三种)
Apr 26 Javascript
基于zepto.js简单实现上传图片
Jun 21 Javascript
JS封装通过className获取元素的函数示例
Dec 20 Javascript
简单实现JS倒计时效果
Dec 23 Javascript
使用jQuery操作DOM的方法小结
Feb 27 Javascript
jQuery中复合选择器简单用法示例
Mar 31 jQuery
vue中实现图片压缩 file文件的方法
May 28 Javascript
原生JavaScript实现留言板
Jan 10 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和ACCESS写聊天室(五)
2006/10/09 PHP
实用javaScript技术-屏蔽类
2006/08/15 Javascript
jQuery中innerHeight()方法用法实例
2015/01/19 Javascript
JS获取iframe中longdesc属性的方法
2015/04/01 Javascript
javascript正则表达式中的replace方法详解
2015/04/20 Javascript
分享几种比较简单实用的JavaScript tabel切换
2015/12/31 Javascript
自动完成的搜索框javascript实现
2016/02/26 Javascript
JavaScript字符串常用的方法
2016/03/10 Javascript
Angular.js项目中使用gulp实现自动化构建以及压缩打包详解
2017/07/19 Javascript
js中json对象和字符串的理解及相互转化操作实现方法
2017/09/22 Javascript
VueJs使用Amaze ui调整列表和内容页面
2017/11/30 Javascript
Vue2.0子同级组件之间数据交互方法
2018/02/28 Javascript
关于vue中 $emit的用法详解
2018/04/12 Javascript
vue项目中axios请求网络接口封装的示例代码
2018/12/18 Javascript
vue 父组件通过v-model接收子组件的值的代码
2019/10/27 Javascript
把项目从Python2.x移植到Python3.x的经验总结
2015/04/20 Python
在Python中操作文件之read()方法的使用教程
2015/05/24 Python
Python操作Word批量生成文章的方法
2015/07/28 Python
Python3爬虫学习之将爬取的信息保存到本地的方法详解
2018/12/12 Python
Python中super函数用法实例分析
2019/03/18 Python
python实现ip地址查询经纬度定位详解
2019/08/30 Python
Python安装依赖(包)模块方法详解
2020/02/14 Python
python代码实现图书管理系统
2020/11/30 Python
python3处理word文档实例分析
2020/12/01 Python
matplotlib部件之套索Lasso的使用
2021/02/24 Python
怎么写好自荐信
2013/10/30 职场文书
建筑公司文秘岗位职责
2013/11/29 职场文书
供货协议书范本
2014/04/22 职场文书
信息与计算机科学职业规划范文:成为一艘有方向的船
2014/09/11 职场文书
2015年元旦主持词开场白
2014/12/14 职场文书
离职证明范本
2015/06/12 职场文书
JS新手入门数组处理的实用方法汇总
2021/04/07 Javascript
用Python可视化新冠疫情数据
2022/01/18 Python
iSCSI服务器CHAP双向认证配置
2022/04/01 Servers
实现GO语言对数组切片去重
2022/04/20 Golang
在Oracle表中进行关键词搜索的过程
2022/06/10 Oracle