原生js实现ajax的用户简单登入
2017-09-24 12:53
603 查看
原生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; } ?>
相关文章推荐
- 使用原生js和Ajax实现无刷新用户登录
- 原生js方式实现ajax,并仿jquery方式简单调用
- 使用JS实现简单缓存功能,防止用户重复点击,重复AJAX提交
- 原生js实现ajax方法(超简单)
- 原生JS简单实现ajax的方法示例
- 原生js实现ajax用于简单的签到或登录
- vuejs2.0运用原生js实现简单的拖拽元素功能
- 原生js实现Ajax实例讲解
- 用JS类实现简单Ajax效果
- 分享一个基于长连接+长轮询+原生的JS及AJAX实现的多人在线即时交流聊天室
- 原生JS实现AJAX、JSONP及DOM加载完成事件,并提供对应方法
- 原生js实现jquery函数animate()动画效果的简单实例
- 原生js实现对Ajax的封装(仿jquery)
- 一个简单的jQuery插件ajaxfileupload.js实现ajax上传文件例子
- 原生JS实现简单的倒计时功能示例
- Struts2框架实现简单的用户登入
- vuejs2.0运用原生js实现简单的拖拽元素功能
- 原生JS与jQuery对AJAX的实现
- 原生JS的简单tab切换实现
- 原生js实现Ajax