以下是ajax代码示例:

HTML

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<script type="text/javascript">
function validation()
{
var name = document.getElementById("username").value;
var pwd = document.getElementById("password").value;
var postStr = "username="+name+"&password="+pwd;
ajax("connect.php",postStr,function(result){
document.getElementById("info").innerHTML=result;
});
} function ajax(url,postStr,onsuccess)
{
var xmlhttp = window.XMLHttpRequest ? new XMLHttpRequest() : new ActiveXObject('Microsoft.XMLHTTP'); //创建XMLHTTP对象,考虑兼容性。XHR
xmlhttp.open("POST", url, true); //“准备”向服务器的GetDate1.ashx发出Post请求(GET可能会有缓存问题)。这里还没有发出请求 //AJAX是异步的,并不是等到服务器端返回才继续执行
xmlhttp.onreadystatechange = function ()
{
if (xmlhttp.readyState == 4) //readyState == 4 表示服务器返回完成数据了。之前可能会经历2(请求已发送,正在处理中)、3(响应中已有部分数据可用了,但是服务器还没有完成响应的生成)
{
if (xmlhttp.status == 200) //如果Http状态码为200则是成功
{
onsuccess(xmlhttp.responseText);
}
else
{
alert("AJAX服务器返回错误!");
}
}
}
xmlhttp.setRequestHeader('Content-Type','application/x-www-form-urlencoded');
//不要以为if (xmlhttp.readyState == 4) {在send之前执行!!!!
xmlhttp.send(postStr); //这时才开始发送请求。并不等于服务器端返回。请求发出去了,我不等!去监听onreadystatechange吧!
}
</script>
</head> <body> 用户名:<input id="username" name="username" type="text" />
<BR />
密码:<input id="password" name="password" type="password" />
<BR />
<input type="button" name="button" value="提交" onclick="validation();" />
<div id="info"></div> </body>
</html>

  php

<?php
$con = mysql_connect('localhost','root','root');
if(!$con)
{
die('error:'.mysql_error());
}
mysql_select_db("ajax-login",$con);
$result = mysql_query("select * from user where username='$_POST[username]'"); while($row = mysql_fetch_array($result))
{
if($row['password'] == md5($_POST['password']))
{
header("Location:success.php");
}
else
{
echo 'error';
}
}
//echo "<br/>";
//print_r($_POST['password']);exit();
?>

  mysql

/*
Navicat MySQL Data Transfer Source Server : localhost
Source Server Version : 50553
Source Host : localhost:3306
Source Database : ajax-login Target Server Type : MYSQL
Target Server Version : 50553
File Encoding : 65001 Date: 2017-12-05 14:32:16
*/ SET FOREIGN_KEY_CHECKS=0; -- ----------------------------
-- Table structure for user
-- ----------------------------
DROP TABLE IF EXISTS `user`;
CREATE TABLE `user` (
`id` int(11) NOT NULL AUTO_INCREMENT,
`username` varchar(30) NOT NULL COMMENT '用户名',
`password` varchar(32) NOT NULL COMMENT '密码',
`login_time` int(10) DEFAULT NULL COMMENT '登录时间',
`login_ip` varchar(32) DEFAULT NULL COMMENT '登录IP',
`login_counts` int(10) NOT NULL DEFAULT '0' COMMENT '登录次数',
PRIMARY KEY (`id`)
) ENGINE=MyISAM AUTO_INCREMENT=3 DEFAULT CHARSET=utf8; -- ----------------------------
-- Records of user
-- ----------------------------
INSERT INTO `user` VALUES ('1', 'demo', 'fe01ce2a7fbac8fafaed7c982a04e229', '0', '', '0');
INSERT INTO `user` VALUES ('2', 'admin', 'admin', '0', '', '0');

  

ajax异步登录的更多相关文章

  1. 使用 jQuery Ajax 异步登录,并验证用户输入信息(maven)

    使用 jQuery Ajax 异步登录,并验证用户输入信息(maven) 本篇内容: (1)上一篇是使用同步的请求实现登录,并由 Servlet 决定登陆后下一步做哪些事情,本篇使用 jQuery A ...

  2. Ajax异步提交登录(2)--登录使用

    http://cjp1989.iteye.com/blog/1740964 1.Ajax的原理: Ajax的原理就是:通过javascript的方式,将前台数据通过xmlhttp对象传递到后台,后台在 ...

  3. Ajax异步方式实现登录与參数的校验

    登录代码 这个是使用Bootstrap3的组件功能实现的 <div class="login_con_R"> <h4>登录</h4> <F ...

  4. ajax基础语法、ajax做登录、ajax做用户名验证是否可用、ajax做关键字查询动态显示、ajax做用表格显示数据并增加操作列

    AJAX: AJAX 是一种用于创建快速动态网页的技术. 通过在后台与服务器进行少量数据交换,AJAX 可以使网页实现异步更新.这意味着可以在不重新加载整个网页的情况下,对网页的某部分进行更新.   ...

  5. AJAX异步提交,浏览器总跳出下载界面

    问题: 我在写一个网页的“用户登录”部分时,要将用户名和密码传到后端验证,想在前端用了AJAX异步提交功能,将 用户名密码传到后端,然后后端返回验证结果.但AJAX写好后每次刷新网页都会跳出下载窗口, ...

  6. 5.Hibernate实现全套增删改查和ajax异步分页

    1.1 创建如下oracle数据库脚本 drop sequence seq_stu; create sequence SEQ_STU minvalue maxvalue start increment ...

  7. struts2中的Ajax异步校验

    登录时验证码的异步校验: 1.验证码生成的是图片因此在struts.xml文件里面配置action 时,result标签中type 属性是stream 2.验证码图片的src的值为配置action名字 ...

  8. ajax异步请求302分析

    1.前言 遇到这样一种情况,打开网页两个窗口a,b(都是已经登录授权的),在a页面中退出登录,然后在b页面执行增删改查,这个时候因为授权原因,b页面后端的请求肯定出现异常(对这个异常的处理,进行内部跳 ...

  9. Ajax 异步局部刷新

    Ajax 异步局部刷新 AJAX 是一种在无需重新加载整个网页的情况下,能够更新部分网页的技术. 通过在后台与服务器进行少量数据交换,AJAX 可以使网页实现异步更新.这意味着可以在不重新加载整个网页 ...

随机推荐

  1. JWT原理及常见攻击方式

    JWT的全称是Json Web Token.它遵循JSON格式,将用户信息加密到token里,服务器不保存任何用户信息,只保存密钥信息,通过使用特定加密算法验证token,通过token验证用户身份. ...

  2. android分析之Parcel

    将数据打包,跨进程传输(通过Binder).看看这货究竟是啥玩意: Parcel.java : public final class Parcel { private static final boo ...

  3. 【ZeyFraのJavaEE开发小知识05】Mybatis-Plus & Axios

    关于如何在Mybatis-Plus中添加SQL拦截器 之前ZeyFra在MyBatis-Plus[踩坑记录01]一文中提到过,使用Mybatis-Plus时最好使用MybatisSqlSessionF ...

  4. pycharm在debug时总是报UnicodeDecodeError

    1,原文链接 解决pycharm run 正常 debug 报 UnicodeDecodeError 错误的问题 2,解决方法 首先尝试 如果上面还不行

  5. 设计vue3的请求实体工厂

    设计一个vue3的请求实体工厂 目录 设计一个vue3的请求实体工厂 描述 实现 构建一个基础请求方法 创建具体请求的方法 下面是对请求的声明文件 下面是请求的定义 generateRequest对请 ...

  6. 走进docker-聊聊docker网络

    容器网络概念 首先了解下linux的网络构成概念 命名空间: Linux在网络栈中引入网络命名空间,将独立的网络协议栈隔离到不同的命令空间中,彼此间无法通信:Docker利用这一特性,实现不容器间的网 ...

  7. Android 之 手动创建活动

    •活动是什么 活动(Activity)是最容易吸引用户的地方,它是一种可以包含用户界面的组件: 主要用于和用户进行交互: 一个应用程序可以包含零个或多个活动. 接下来,我们来学习一下活动的基本用法. ...

  8. Java 读取Word文本/段落格式属性

    本文介绍通过Java后端程序代码来读取Word文本和段落格式的方法. 本次测试环境如下: Word版本:2013 编译环境:IntelliJ IDEA2018 Work库:free spire.doc ...

  9. 使用Gensim库对文本进行词袋、TF-IDF和n-gram方法向量化处理

    Gensim库简介 机器学习算法需要使用向量化后的数据进行预测,对于文本数据来说,因为算法执行的是关于矩形的数学运算,这意味着我们必须将字符串转换为向量.从数学的角度看,向量是具有大小和方向的几何对象 ...

  10. IDEA 主题下载

    IDEA中主题可以更换,大家可以直接到 http://www.riaway.com/  网站或 http://color-themes.com/?view=index  网站,直接下载自己喜欢的主题. ...