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 相关文章推荐
js直接编辑当前cookie的脚本
Sep 14 Javascript
JS中的数组的sort方法使用示例
Jan 22 Javascript
AngularJS表达式讲解及示例代码
Aug 16 Javascript
JS简单实现无缝滚动效果实例
Aug 24 Javascript
原生JavaScript制作计算器
Oct 16 Javascript
jQuery Easyui加载表格出错时在表格中间显示自定义的提示内容
Dec 08 Javascript
vue.js实现标签页切换效果
Jun 07 Javascript
JS实现textarea通过换行或者回车把多行数字分割成数组并且去掉数组中空的值
Oct 29 Javascript
使用Node.js在深度学习中做图片预处理的方法
Sep 18 Javascript
20多个小事例带你重温ES10新特性(小结)
Sep 29 Javascript
webpack打包优化的几个方法总结
Feb 10 Javascript
Vue3+elementui plus创建项目的方法
Dec 01 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
图书管理程序(三)
2006/10/09 PHP
PHP中文URL编解码(urlencode()rawurlencode()
2010/07/03 PHP
解析PHP正则提取或替换img标记属性
2013/06/26 PHP
Symfony2实现从数据库获取数据的方法小结
2016/03/18 PHP
基于PHP实现堆排序原理及实例详解
2020/06/19 PHP
JS命名空间的另一种实现
2013/08/09 Javascript
Javascript学习笔记之数组的遍历和 length 属性
2014/11/23 Javascript
深入理解jquery中的事件与动画
2016/05/24 Javascript
javascript加载xml 并解析各节点的值(实现方法)
2016/10/12 Javascript
AngularJS中run方法的巧妙运用
2017/01/04 Javascript
Node.js安装配置图文教程
2017/05/10 Javascript
require.js与bootstrap结合实现简单的页面登录和页面跳转功能
2017/05/12 Javascript
JQuery扩展对象方法操作示例
2018/08/21 jQuery
一些可能会用到的Node.js面试题
2019/06/15 Javascript
Node.js 实现远程桌面监控的方法步骤
2019/07/02 Javascript
layui表格 返回的数据状态异常的解决方法
2019/09/10 Javascript
Vue项目环境搭建详细总结
2019/09/26 Javascript
vue(2.x,3.0)配置跨域代理
2019/11/27 Javascript
JavaScript canvas实现跟随鼠标移动小球
2021/02/09 Javascript
Python中AND、OR的一个使用小技巧
2015/02/18 Python
Python numpy 常用函数总结
2017/12/07 Python
一文秒懂python读写csv xml json文件各种骚操作
2019/07/04 Python
python切片的步进、添加、连接简单操作示例
2019/07/11 Python
大家都说好用的Python命令行库click的使用
2019/11/07 Python
将自己的数据集制作成TFRecord格式教程
2020/02/17 Python
python闭包、深浅拷贝、垃圾回收、with语句知识点汇总
2020/03/11 Python
Python tkinter制作单机五子棋游戏
2020/09/14 Python
Python的scikit-image模块实例讲解
2020/12/30 Python
CSS3 文字动画效果
2020/11/12 HTML / CSS
Farfetch中文官网:奢侈品牌时尚购物平台
2020/03/15 全球购物
清洁工岗位职责
2014/01/29 职场文书
建筑结构施工专业推荐信
2014/02/21 职场文书
保护环境倡议书100字
2014/05/19 职场文书
医药公司采购员岗位职责
2014/09/12 职场文书
Python爬虫之爬取某文库文档数据
2021/04/21 Python