《ajax学习》之ajax+JavaScript事件验证用户名是否可注册
当用户注册时，服务器数据库需要对用户输入的用户信息（以用户名为例子）进行验证，在不刷新页面的情况下又需要页面和服务器进行数据请求，最好的方法是用ajax异步请求。
一、实现思路：
1.用户输入信息
2.创建输入框失焦事件
2.1当用户输入玩完成时记录用户输入的值
2.2创建XMLHttpRequest对象
2.3使用open（）方法对请求的方式作说明，并将用户输入的数当参数传递给请求的PHP文件
2.4send（）方法发送请求
3.创建onreadystatechange事件根据readyState的值和status判断文件以及网络状况
if (xmlhttp.readyState==0){
console.log("请求未初始化");
}
if(xmlhttp.readyState==1){
console.log("服务器连接已建立");
}
if(xmlhttp.readyState==2){
console.log("请求已接收");
}
if(xmlhttp.readyState==3){
console.log("请求处理中");
}
//当请求处理完成且网络畅通显示ajax的处理结果
if(xmlhttp.readyState==4 && xmlhttp.status===200){
console.log("请求处理完成");
document.getElementById("name_info").innerHTML=xmlhttp.responseText;
}
4.ajax异步处理完判断用户是否能够注册之后提示用户是否可以注册
二、知识点：
1.ajax的工作原理
2.readyState的各个状态表示含义
3.PHP连接MySQL数据并查询数据
4.JavaScript事件的学习
代码：
index.html文件：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>ajax验证用户注册</title>
<style>
body{
background: #b3b3b3;
}
.div1{
margin:300px auto;
width:300px;
height:80px;
text-align: right;
}
.div1 p{
font-size: 12px;
color:#f00;
font-weight:bold;
}
</style>
</head>
<body>
<div class="div1">
<form action="" name="regist">
用户名：<input type="text" name="username" id="name"><p id="name_info"></p><br/>
密码：<input type="password" name="pass"><br/>
确认密码：<input type="password" name="passagain" id="passagain"><p id="pass_info"></p><br/>
<input type="submit" value="注册">
<input type="reset" value="取消">
</form>
</div>
<script src="regist.js"></script>
</body>
</html>
regist.js文件：
var xmlhttp;
//创建失焦事件--验证用户名是不是可以注册
document.getElementById("name").addEventListener("blur",readTXT);
//输入框聚焦事件--聚焦时选中
document.getElementById("name").onfocus=function(){
this.select();
}
//确认密码的文本框失焦时--检验两次密码是否正确
document.getElementById("passagain").addEventListener("blur",ISsame); //网络请求状态发生变化时的事件
function state_Change(){
if (xmlhttp.readyState==0){
console.log("请求未初始化");
}
if(xmlhttp.readyState==1){
console.log("服务器连接已建立");
}
if(xmlhttp.readyState==2){
console.log("请求已接收");
}
if(xmlhttp.readyState==3){
console.log("请求处理中");
}
//当请求处理完成且网络畅通显示ajax的处理结果
if(xmlhttp.readyState==4 && xmlhttp.status===200){
console.log("请求处理完成");
document.getElementById("name_info").innerHTML=xmlhttp.responseText;
}
} function readTXT(){
var a;
//创建XMLHttpRequest对象 if (window.XMLHttpRequest)
{
// IE7+, Firefox, Chrome, Opera, Safari 浏览器执行代码
xmlhttp=new XMLHttpRequest();
}
else
{
// IE6, IE5 浏览器执行代码
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
a=regist.username.value;//1.更新参数a的值
//2.发送网络请求
//获取表单用户输入的用户名
//获取本地文本
//xmlhttp.open("GET","test.txt",true);
//获取本地PHP文件
//xmlhttp.open("GET","test.php",true);
//获取服务器端txt文件
//xmlhttp.open("GET","http://localhost:9999/ajax/biaodan/test.txt",true);
//获取服务器端php文件
xmlhttp.open("GET","http://localhost:9999/ajax/biaodan/test.php?a="+a,true);
xmlhttp.send();
xmlhttp.onreadystatechange=state_Change;//请求状态改变事件
}
function ISsame(){
if(regist.pass.value!=regist.passagain.value){
document.getElementById("pass_info").innerHTML="两次输入密码不一致！";
}
else{
document.getElementById("pass_info").innerHTML="";
}
}
test.php文件：
<?php
$temp=$_GET['a'];//接收参数
$con = mysql_connect("localhost", "root", "root");//创建数据库连接
if (!$con){
//die('Could not connect: ' . mysql_error());
}
else{
//echo"success!";
}
$db_selected = mysql_select_db("ajax_stydy", $con);
$sql = "select * from user where username='".$temp."'";
$result = mysql_query($sql,$con);//查询数据
if(!mysql_num_rows($result)){//数据库中不存在该用户名时提示可以注册
//echo "wushuju";
echo "<span style='color:green'>*恭喜您！用户名'".$temp."'可以注册*</span>";
}
else{//已存在该用户提示更换用户名
echo "<span style='color:red'>*该用户名已被注册请更换！*</span>";
}
mysql_close($con);//关闭数据库连接
?>
《ajax学习》之ajax+JavaScript事件验证用户名是否可注册的更多相关文章
- Ajax验证用户名是否被注册
Ajax验证用户名是否被注册 var xmlHttp; function createXMLHttpRequest(){ // 创建XMLHttp请求对象 if(window.ActiveXObjec ...
- Django——Ajax发送请求验证用户名是否被注册
场景: 用户注册的时候,输入用户名之后,Ajax发送请求到后端,后端验证该用户名是否已经被注册,然后返回到注册页面提示用户. 1.模型: from django.db import models cl ...
- aJax学习之Ajax工作原理
转自:http://www.cnblogs.com/mingmingruyuedlut/archive/2011/10/18/2216553.html 在写这篇文章之前,曾经写过一篇关于AJAX技术的 ...
- Ajax学习--理解 Ajax 及其工作原理
Ajax 是 Asynchronous JavaScript and XML(以及 DHTML 等)的缩写. 下面是 Ajax 应用程序所用到的基本技术:• HTML 用于建立 Web 表单并确定应用 ...
- [ajax 学习笔记] ajax初试
ajax全称是:asynchronous javasctipt and xml. 1.为什么须要ajax? 一般web程序与server的交互是:页面发送请求等待server处理,server处理数据 ...
- ajax验证用户名是否被注册 ; ajax提交form表单
register.html 文件代码: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" &quo ...
- Flask ajax 动态html 的javascript 事件失效
$('.db_edit').click(function(){ $(".editdbproduct").val($(this).parent().parent().find('.e ...
- Day17-18前端学习之路——Javascript事件
用户在某个元素上点击鼠标或悬停光标. 用户在键盘中按下某个按键. 用户调整浏览器的大小或者关闭浏览器窗口. 一个网页停止加载. 提交表单. 播放.暂停.关闭视频. 发生错误. 更多事件:https:/ ...
- Ajax学习系列——Ajax介绍及优缺点
一.什么是Ajax Ajax即“Asynchronous JavaScript And XML”(异步JavaScript和XML),是一种创建交互式网页应用的网页开发技术. Ajax = 异步Jav ...
随机推荐
- Service官方教程(9)绑定服务时的注意事项
Binding to a Service Application components (clients) can bind to a service by calling bindService() ...
- 第一次阅读作业 xinzcover
---恢复内容开始--- 第一次阅读和准备作业 这个作业属于哪个课程 https://edu.cnblogs.com/campus/xnsy/SoftwareEngineeringClass1 这个作 ...
- TCP/IP 协议、地址
(一)TCP/IP 协议是端与端之间通信的基础,计算机网络,分组报文,协议是将信息正确传递的组成. 计算机网络: 由多个客户端,中间路由组成的网络体系,每个节点都一个ip进行唯一识别.路由是作为一个转 ...
- 请大家帮我找一找bug —— 一个MySQL解析程序（JAVA实现）
周末两天我写了一个MySQLParser.写这个东西的目的是:公司的一个项目中需要对数据打版本号(每个表的每条记录要有一个版本号字段,这个字段需要由框架自动打上去,而不是由程序员来做). 所以,我写的 ...
- 对gridview绑定数据的操作方法及自定义显示内容
GridView中Eval和 Bind 的使用 Eval:绑定的是只读数据的显示:Bind:可以绑定只读数据也可以绑定更新数据,Bind方法还把字段和控件的绑定属性联系起来,使得 数据控件(比如Gri ...
- PostgreSQL执行机制的初步学习
作为开源数据库的新手,近日有兴对比了Pg和MySQL的查询计划. 通过Pg源码目录下的src\backend\executor\README文件,加上一些简单调试,就能对Pg的执行机制产生一个初步印象 ...
- vuex的应用和解决的实际问题
这是vuex的语法结构内容 简单的理解vuex: new Vue({ // state data () { return { count: 0 } }, // view template: ` < ...
- 认识MySQL Replication
MySQL Replication 是 MySQL 非常有特色的一个功能,他能够将一个 MySQL Server 的 Instance 中的数据完整的复制到另外一个 MySQL Server 的 In ...
- 洛谷 P3371 【模板】单源最短路径(堆优化dijkstra)
题目描述 如题,给出一个有向图,请输出从某一点出发到所有点的最短路径长度. 输入输出格式 输入格式: 第一行包含三个整数N.M.S,分别表示点的个数.有向边的个数.出发点的编号. 接下来M行每行包含三 ...
- 看到了一篇不错的tensorflow文章
http://dataunion.org/28906.html 本文作者 Steven Dufresne,总结了新手学 TensorFlow 需要的核心知识点和实操内容,旨在鼓励更多人借 Tensor ...