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的更多相关文章

  1. 使用ajax登录验证,第一次点击登录按钮无反应,第二次点击才能正常运行。

    问题描述: 使用ajax进行登录验证时,第一次点击登录按钮无反应,第二次点击才能进去. 解决方法: 原来的代码 <form action="" method="po ...

  2. 完整的 dataType=text/plain jquery ajax 登录验证

    Html: <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <m ...

  3. Ajax注册验证js代码

    分享jquery网站:http://www.css88.com/jqapi-1.9/focusout/ $(document).ready(function() { var bool_user = f ...

  4. 01- ajax, 登录验证,json数据,文件上传

    1.ajax简介 1.向服务器发送请求的途径 # 向服务器发送请求的途径 1. 浏览器地址栏,默认get请求 2. form表单: get请求 post请求 3. a标签,默认get请求 4. Aja ...

  5. Python Django缓存,信号,序列化,文件上传,Ajax登录和csrf_token验证

    本节内容 models操作 Django的缓存 请求方式 序列化 Form 配合Ajax实现登录认证 上传文件 Ajax  csrf_token验证方式 1 models操作 单表查询: curd(增 ...

  6. Django 博客项目01 数据库设计与验证码校验+Ajax登录

    数据库设计 from django.db import models from django.contrib.auth.models import AbstractUser class UserInf ...

  7. 2-功能1:基于用户认证组件和Ajax实现登录验证(图片验证码)

    1.登录页面的设计 (1)label标签的id属性 label标签的id属性,点击label标记,相当于点击了input框 bootstarp样式 class="form-group&quo ...

  8. 基于Ajax与用户认证系统的登录验证

    一.登录页面 from django.contrib import admin from django.urls import path from blog import views urlpatte ...

  9. Ajax(简介、基础操作、计算器,登录验证)

    Ajax简介 Ajax 即"Asynchronous Javascript And XML"(异步 JavaScript 和 XML),是指一种创建交互式网页应用的网页开发技术. ...

随机推荐

  1. R语言统计学习-1简介

    一. 统计学习概述 统计学习是指一组用于理解数据和建模的工具集.这些工具可分为有监督或无监督.1.监督学习:用于根据一个或多个输入预测或估计输出.常用于商业.医学.天体物理学和公共政策等领域.2.无监 ...

  2. Java异常知识整理_处理异常时的性能开销

    1.首先列两个从别的地方看到的说法: try-catch代码段会产生额外的性能开销,或者换个角度说,它往往会影响JVM对代码进行优化,所以建议仅捕获有必要的代码段,尽量不要一个大的try包住整段的代码 ...

  3. kubernetes之ingress及ingress controller

    什么是ingress Ingress是授权入站连接到达集群服务的规则集合. 从外部流量调度到nodeprot上的service 从service调度到ingress-controller ingres ...

  4. 主机管理+堡垒机系统开发:webssh(十)

    一.安装shellinabox 1.安装依赖工具 yum install git openssl-devel pam-devel zlib-devel autoconf automake libtoo ...

  5. Docker: 基础介绍 [一]

    一.Docker介绍 Docker是Docker.lnc公司开源的一个基于LXC技术之上构建的Container容器引擎,源代码托管在Github上,基于Go语言并遵从Apache2.0协议开源 Do ...

  6. 一个select元素自定义设计的新思路:appearance: none之后利用<>符号制造小箭头

    最近工作时解决了一个前端小问题(如下图所示):在Safari中,select的控件之上有不和谐的灰色部分. 刚开始时我以为是backgrand或是border设置不当之类产生的问题,在搜索了很久之后终 ...

  7. 【转载】VS中生成、清理项目、调试、开始执行(不调试)、Debug 和 Release等之间的区别

    https://blog.csdn.net/u012441545/article/details/51404412

  8. python学习01

    1.python怎样运行? 1)打开运行窗口,输入python 2)打开运行窗口,直接输入 python + python代码  `python -c "print(1/6.878)&quo ...

  9. RT-SA-2019-004 Cisco RV320 Unauthenticated Diagnostic DataRetrieval

    Advisory: Cisco RV320 Unauthenticated Diagnostic Data Retrieval RedTeam Pentesting discovered that t ...

  10. oracle建表 和 设置主键自增

    1.新建table CREATE TABLE ysb_log( id ) primary key not null , tbdate ) NULL, tb_time ) NOT NULL, tblog ...