js实现ajax的用户简单登入功能

本文实例为大家分享了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;
}
?>

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。

赞 (0)

相关推荐

  • javascript和jquery分别实现用户登录验证

    javascript和jquery分别实现用户登录验证

    在上一篇文章http://www.jb51.net/article/83504.htm中,用javascript实现了用户验证,但并没有对密码进行验证,这次追加了这个功能,并分别用javascript和jquery实现. 一.用jquery的ajax实现的关键代码 实现如下 /*jquery实现 $(document).ready(function(){ $("#account").blur(function(event) { $.ajax({ type:"GET"

  • Javascript实现登录记住用户名和密码功能

    话不多说,请看代码: <script type="text/javascript"> $(document).ready(function () { $("#UserAccount").focus(); //记住用户名和密码 $('#remebers').click(function () { if ($("#UserAccount").val() == "") { alert("用户名不能为空!&quo

  • JSP实现简单的用户登录并显示出用户信息的方法

    本文实例讲述了JSP实现简单的用户登录并显示出用户信息的方法.分享给大家供大家参考.具体实现方法如下: login.jsp 复制代码 代码如下: <%@ page language="java" import="java.util.*" pageEncoding="GB18030"%>  <%  String path = request.getContextPath();  String basePath = request.

  • Node.js+Express+MySql实现用户登录注册功能

    Node.js+Express+MySql实现用户登录注册功能

    本文实例为大家分享了Node.js实现用户登录注册的具体代码,供大家参考,具体内容如下 IDE:WebStorm 工程目录: 数据库表 Login.js: /** * Created by linziyu on 2017/7/8. */ /** * express接收html传递的参数 */ var express=require('express'); var app=express(); var mysql=require('mysql'); /** * 配置MySql */ var con

  • JavaScript 利用Cookie记录用户登录信息

    Html代码: 复制代码 代码如下: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8">

  • vue.js实现用户评论、登录、注册、及修改信息功能

    vue.js实现用户评论、登录、注册、及修改信息功能

    vue.js实现用户评论.登录.注册.及修改用户部分信息功能代码.效果图如下: 登入后: 登入前: 登录框: 注册框: html代码部分: <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <title>index</title> <link rel="stylesheet" href=&quo

  • javascript记住用户名和登录密码（两种方式）

    下面主要通过代码给大家展示下javascript记住用户名和登录密码,具体代码内容请看下文. 第一种方式: CONTENT     login.html     welcome.html     cookie.js     common.js login.html <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-t

  • JSP实现用户登录、注册和退出功能

    JSP实现用户登录、注册和退出功能

    本文讲述使用JSP实现用户登录,包括用户登录.注册和退出功能等. 1.系统用例图 2.页面流程图 3.数据库设计 本例使用oracle数据库 创建用户表 包括id,username,password和email,共4个字段 -- Create table create table P_USER ( id VARCHAR2(50) not null, username VARCHAR2(20), password VARCHAR2(20), email VARCHAR2(50) ) tablesp

  • jquery.cookie.js实现用户登录保存密码功能的方法

    本文实例讲述了jquery.cookie.js实现用户登录保存密码功能的方法.分享给大家供大家参考,具体如下: 需要导入的js有jquery.js和jquery.cookie.js <script type="text/javascript" src=" jquery-1.5.2.js"></script> <script type="text/javascript" src="jquery.cookie.

  • js实现ajax的用户简单登入功能

    本文实例为大家分享了js实现ajax的用户简单登入的具体代码,供大家参考,具体内容如下 原生js实现ajax html页面 <!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <title>ajax登录</title> </head> <body> <div> <div id=&q

  • ASP.NET在IE10中无法判断用户已登入及Session丢失问题解决方法

    今天发现在IE10中登录我公司的一个网站时,点击其它菜单,页面总会自动重新退出到登录页,后检查发现,IE10送出的HTTP头,和.AUTH Cookie都没问题,但使用表单验证机制(FormsAuthentication)却无法判断该用户已登入,保存的Session总会丢失. 后查实这是ASP.NET 2.0,3.5和4.0的Bugs,因这些版本无法识别IE10的User-Agent标头字符串,所以无法识别用户浏览器的版本,从而导至了ASP.NET的特定功能失效,认为游览器不支持Cookies功

  • 原生js实现ajax方法(超简单)

    上一篇文章写到原生js取代jquery的一些常用函数:原生js仿jquery一些常用方法,那么,ajax如何实现呢?如下是一个比较完整的ajax() function ajax(){ var ajaxData = { type:arguments[0].type || "GET", url:arguments[0].url || "", async:arguments[0].async || "true", data:arguments[0].d

  • Spring boot 使用QQ邮箱进行一个验证登入功能

    Spring boot 使用QQ邮箱进行一个验证登入功能

    目录 Spring boot 使用QQ邮箱进行一个验证登入 QQ邮箱开启权限 创建发送验证码的请求Controller 注册,登录验证 Spring boot 使用QQ邮箱进行一个验证登入 QQ邮箱开启权限 在QQ邮箱设置->账户里面,往下拉找到这个开启,手机号验证成功后会有一串英文字符串是待会儿要用到的密码. prom.xml 添加依赖 <dependency> <groupId>org.springframework.boot</groupId> <ar

  • 分析xxljob登入功能集成OIDC的统一认证

    分析xxljob登入功能集成OIDC的统一认证

    目录 前言 XXL-JOB自身认证功能分析 OIDC的认证流程 XXL-JOB集成OIDC后的认证流程 XXL-JOB登录模块重新设计 编码环节 前言 xxl-job 是一款 java 开发的.开源的分布式任务调度系统,自带了登录认证功能,不支持对接.扩展 LDAP .OIDC 等标准认证系统,考虑到单独维护 xxl-job 自有的用户系统不方便,以及存在人员离职.调岗.权限变动等需要及时调整用户权限的情况,需要接入公司统一的 OIDC 认证系统 相关链接 xxl-job :https://gi

  • Spring Boot整合Spring Security简单实现登入登出从零搭建教程

    Spring Boot整合Spring Security简单实现登入登出从零搭建教程

    前言 Spring Security是一个能够为基于Spring的企业应用系统提供声明式的安全访问控制解决方案的安全框架.它提供了一组可以在Spring应用上下文中配置的Bean,充分利用了Spring IoC,DI(控制反转Inversion of Control ,DI:Dependency Injection 依赖注入)和AOP(面向切面编程)功能,为应用系统提供声明式的安全访问控制功能,减少了为企业系统安全控制编写大量重复代码的工作. 本文主要给大家介绍了关于Spring Boot整合S

  • Ajax基础与登入教程

    Ajax基础与登入教程

    Ajax 是 Asynchronous JavaScript and XML的缩写. Ajax的优点: 优点:减轻服务器的负担,按需取数据,最大程度的减少冗余请求 局部刷新页面,减少用户心理和实际的等待时间,带来更好的用户体验 基于xml标准化,并被广泛支持,不需安装插件等 进一步促进页面和数据的分离 Ajax包含下列技术: 基于web标准(standards-based presentation)XHTML+CSS的表示: 使用 DOM(Document Object Model)进行动态显示

  • java读取用户登入退出日志信息上传服务端

    本文实例为大家分享了读取用户登入出日志并上传服务端的具体实现代码,供大家参考,具体内容如下 该客户端运行在给用户提供unix服务的服务器上.用来读取并收集该服务器上用户的上下线信息,并进行配对整理后发送给服务端汇总. 具体实现代码: 1. DMSServer.java package com.dms; import java.io.BufferedReader; import java.io.File; import java.io.FileOutputStream; import java.i

  • 用原生JS对AJAX做简单封装的实例代码

    首先,我们需要xhr对象.这对我们来说不难,封装成一个函数. var createAjax = function() { var xhr = null; try { //IE系列浏览器 xhr = new ActiveXObject("microsoft.xmlhttp"); } catch (e1) { try { //非IE浏览器 xhr = new XMLHttpRequest(); } catch (e2) { window.alert("您的浏览器不支持ajax,请

  • Vue.js展示AJAX数据简单示例讲解

    最近琢磨了一下vue.js,并在项目中进行了运用,感觉非常好用,强烈推荐. 当通过AJAX方式取回数据后,使用vue.js可以完美地按一定逻辑在页面上的展示数据,代码简单.优美.自然,而且便于与在用的页面框架集成. 感谢vue.js的作者,官方网站地址:https://cn.vuejs.org 举个小例子.注意,代码中使用jQuery.bootstrap.没有用过bootstrap不影响阅读本文. 一.返回的JSON数据示例 [ {"playid":"12113c676a4e

随机推荐