ajax登录验证-js
1、html代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>ajax登录</title>
</head>
<body>
<div>
<form action="" method="post">
<div id="showinfo"></div>
用户名：<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 passwords = document.getElementById("password").value var xhr = null;
if(window.XMLHttpRequest){
xhr=new XMLHttpRequest();
}else{
xhr = ActiveXObject("Microsoft.XMLHTTP");
}
xhr.open('get','./check.php?username='+username+"&password="+passwords,true);
xhr.onreadystatechange = function(){
if(xhr.readyState==4){
if(xhr.status==200){
var data = xhr.responseText;
if(data==1){
document.getElementById('showinfo').innerHTML = "用户名或密码错误"
}else if(data==2){
document.getElementById('showinfo').innerHTML = "登录成功" }
}
}
}
xhr.send(null);
}
}
</script>
</body>
</html>
2、后台代码（此处是php）
<?php
$username = $_GET['username'];
$password = $_GET['password']; if($username=='admin' && $password=='123'){
echo 2;
}else{
echo 1;
}
?>
3、实现结果展示
ajax登录验证-js的更多相关文章
- 使用ajax登录验证，第一次点击登录按钮无反应，第二次点击才能正常运行。
问题描述: 使用ajax进行登录验证时,第一次点击登录按钮无反应,第二次点击才能进去. 解决方法: 原来的代码 <form action="" method="po ...
- 完整的 dataType=text/plain jquery ajax 登录验证
Html: <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <m ...
- Ajax注册验证js代码
分享jquery网站:http://www.css88.com/jqapi-1.9/focusout/ $(document).ready(function() { var bool_user = f ...
- 01- ajax， 登录验证，json数据，文件上传
1.ajax简介 1.向服务器发送请求的途径 # 向服务器发送请求的途径 1. 浏览器地址栏,默认get请求 2. form表单: get请求 post请求 3. a标签,默认get请求 4. Aja ...
- Python Django缓存，信号，序列化，文件上传，Ajax登录和csrf_token验证
本节内容 models操作 Django的缓存 请求方式 序列化 Form 配合Ajax实现登录认证 上传文件 Ajax csrf_token验证方式 1 models操作 单表查询: curd(增 ...
- Django 博客项目01 数据库设计与验证码校验+Ajax登录
数据库设计 from django.db import models from django.contrib.auth.models import AbstractUser class UserInf ...
- 2-功能1：基于用户认证组件和Ajax实现登录验证(图片验证码)
1.登录页面的设计 (1)label标签的id属性 label标签的id属性,点击label标记,相当于点击了input框 bootstarp样式 class="form-group&quo ...
- 基于Ajax与用户认证系统的登录验证
一.登录页面 from django.contrib import admin from django.urls import path from blog import views urlpatte ...
- Ajax（简介、基础操作、计算器，登录验证）
Ajax简介 Ajax 即"Asynchronous Javascript And XML"(异步 JavaScript 和 XML),是指一种创建交互式网页应用的网页开发技术. ...
随机推荐
- IDEA配置注释模板
直接进入主题: Ctrl+Alt+S进入设置界面(我没改过按键映射,你也可以从File-OtherSetting进入设置),找到Editor->File and Code Templates,先 ...
- 浅谈js中的this关键字
---恢复内容开始--- this是JavaScript中的关键字之一,在编写程序的时候经常会用到,正确的理解和使用关键字this尤为重要.接下来,笔者就从作用域的角度粗谈下自己对this关键字的理解 ...
- CSS iconfont阿里巴巴矢量图库在开发中实战使用
前言 项目开发中,是避免不了使用小图标的,那么国内比较好用的图标网站当属iconfont了,下面我们将详细介绍如何使用. iconfont选择所需图标 1.iconfont官网 2.把所需要的添加进入 ...
- Gram 矩阵与向量到子空间的距离
设 $W$ 是 $n$ 维 Euclidean 空间 $V$ 的子空间, $\beta\in V$, 定义 $\beta$ 到 $W$ 的距离 $$\bex \rd (\beta,W)=|\bet ...
- Vue技术内幕 出去看看吧
Vue的 Vue构造函数的出生 出生文件 ./instance/index 实例方法和属性 .global-api/index 静态方法和属性 Vue平台化包装 Web平台化 vue 初始化 m ...
- windows配置openssl
下载openssl并安装,下载地址:http://slproweb.com/products/Win32OpenSSL.html 假设安装路径为C:\"Program Files" ...
- pom文件报错org.apache.maven.archiver.mavenarchiver.getmanifest
eclipse导入新的maven项目时,pom.xml第一行报错: org.apache.maven.archiver.MavenArchiver.getManifest(org.apache.mav ...
- ES进阶--04
第30节彻底掌握IK中文分词_上机动手实战IK中文分词器的安装和使用 之前大家会发现,我们全部是用英文在玩儿...好玩儿不好玩儿...不好玩儿 中国人,其实我们用来进行搜索的,绝大多数,都是中文应用, ...
- poj 1426 Find The Multiple （简单搜索dfs）
题目: Given a positive integer n, write a program to find out a nonzero multiple m of n whose decimal ...
- git官网和安装使用教程链接
git官网 https://git-scm.com/download/win git安装教程 https://www.cnblogs.com/wj-1314/p/7993819.html