Ajax之简单验证登录注册

最新推荐文章于 2022-12-05 00:51:31 发布
最新推荐文章于 2022-12-05 00:51:31 发布
阅读量946 收藏 2
点赞数
分类专栏： ajax 文章标签： ajax 表单验证
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Welkin_qing/article/details/85128857
版权

一、 传统Ajax注册登录

html主页：

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
</head>
<body>
	<form action="reg.php" method="post">
		用户名： <input type="text" name="username">
		<input type="submit" value="注册">
	</form>
</body>
</html>

php后台如下：

<?PHP

	header("Content-type: text/html; charset=utf-8");  //指定编码
	$con = mysql_connect('localhost', 'root', '123456wq');   // 连接数据库
	mysql_select_db("testajax");   //连接指定的数据库
	mysql_query('set names utf8');  //指定数据库编码 

	$username = $_POST['username'];  //提交数据
	$sql = "select * from reg where username = '$username'" ;
	$query = mysql_query($sql);

	if($query && mysql_num_rows($query)){
		echo "<script>alert('已经注册过了')</script>";
		echo "<script>history.back()</script>" ; //返回上一个页面
	}else{
		$sql = "insert into reg(username) values('$username')";
		$query = mysql_query($sql);
		if($query){
			echo "<script>alert('注册成功')</script>";
			echo "<script>window.location = 'index.html'</script>";
		}
	}
?>

这是我刚刚建的数据库，没有设置id是自增长的模式。123是刚刚验证的数据，如果输入welkin会提示已经注册过了，输入其他的则会插入数据表中
数据库

二、类github注册登录

当光标移开显示sql查询结果
html:

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
</head>
<body>
	<form action="reg.php" method="post">
		用户名： <input id="input1" type="text" name="username">
		<input type="submit" value="注册">
	</form>
	<div id="div1"></div>
	<script type="text/javascript">
	var oInput = document.getElementById('input1');//hhhhh
	var oDiv = document.getElementById('div1');

	oInput.onblur = function () {
		//当光标移开
		var xhr = new XMLHttpRequest();
		xhr.open('GET', 'reg2.php?username='+encodeURIComponent(this.value),true);  
		//true为异步发送,同时为value进行编码，使其不出现乱码
		xhr.onreadystatechange = function(){
			if(xhr.readyState == 4){
				//console.log(xhr.status);
				//console.log(xhr.statusText);
				if(xhr.status == 200){
					var obj = JSON.parse(xhr.responseText);
					if(obj.code){
						oDiv.innerHTML = obj.message;
					}else{
						oDiv.innerHTML = obj.message;
					}
				}
			}
		};
		xhr.send(null);
	};
	</script>
</body>
</html>

php:

<?php
	header("Content-type: text/html; charset=utf-8");  //指定编码
	$con = mysql_connect('localhost', 'root', '123456wq');   // 连接数据库
	mysql_select_db("testajax");   //连接指定的数据库
	mysql_query('set names utf8');  //指定数据库编码 

	$username = $_GET['username'];
	
	$sql = "select * from reg where username = '$username'";
	$query = mysql_query($sql);
	
	if($query && mysql_num_rows($query)){
		echo '{"code":0 , "message" : "已经有人注册过啦"}'; 
	}
	else{
		echo '{"code":1 , "message" : "可以注册"}'; 
	}
?>

三、 post请求

需要设置头信息，即：

xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');

且在open中的数据拿到send中，并在php中将请求改为post
如果不想改，可以使用REQUSET

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
</head>
<body>
	<form action="reg.php" method="post">
		用户名： <input id="input1" type="text" name="username">
		<input type="submit" value="注册">
	</form>
	<div id="div1"></div>
	<script type="text/javascript">
	var oInput = document.getElementById('input1');//hhhhh
	var oDiv = document.getElementById('div1');

	oInput.onblur = function () {
		//当光标移开
		var xhr = new XMLHttpRequest();
		xhr.open('POST', 'reg2.php',true);  
		//true为异步发送,同时为value进行编码，使其不出现乱码
		xhr.onreadystatechange = function(){
			if(xhr.readyState == 4){
				//console.log(xhr.status); //打印状态码
				//console.log(xhr.statusText);  //打印状态码所对应的信息
				if(xhr.status == 200){
					var obj = JSON.parse(xhr.responseText);
					if(obj.code){
						oDiv.innerHTML = obj.message;
					}else{
						oDiv.innerHTML = obj.message;
					}
				}
			}
		};
		xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
		xhr.send('username='+encodeURIComponent(this.value));
	};
	</script>
</body>
</html>

四、jquery中使用ajax

  1. 首先引入jquery的包
  2. $.ajax进行传数据
$.ajax({
	url : 'jquery.php',
	type : 'POST',
	data : {username:"hello"},
	dataType : 'json',
	async : false,  //false为同步
	success : function(data){   //xhr.responseText
		console.log(data);
		//var obj = JSON.parse(data);
		//console.log(obj);
	},
	error : function(err){
		console.log(err.status);
		console.log(err.statusText);
	}
});

php

<?PHP

	//echo 'red';
	echo '{"color":"red","width":"200px"}';

?>

得到从控制台输出的数据
得到数据

五、知识点总结

php扩展：

  • mysql_fetch_row 数组下标输出
  • mysql_fetch_assoc 数组键值方式输出
  • mysql_fetch_array 数组整体方式输出
  • mysql_fetch_object 对象键值方式输出

JSON_encode($data) === $row -> username

数组键值=== 对象键值

状态码
状态码
post方式

Welkin_qing
关注
专栏目录
ajax实现用户登录注册
07-28
ajax实现用户登录注册，完整的验证，经过调试，适合初学者
jQuery Ajax 登陆和注册页面
06-01
带有自动验证插件，
【ajax】ajax异步实现用户注册验证
dingchanjuan4613的博客
12-10 361
从前台到后台实现简单用户注册检查用户是否存在 1.编写domain public class User { private String username; private String password; public String getUsername() { return username; } public void ...
AJAX注册用户验证（珍藏版）
刘海闯的专栏
11-17 8186
reg.html (注册页面) ajax用户验证 Ajax用户注册验证 method=post>                       用户名:               name="username">             *                     email:
Ajax实现登录验证
06-24
Ajax实现的登录页面，能够不刷新页面直接登录
ajax实现简单登录验证
10-12
在本文中，我们将深入探讨如何使用Ajax技术实现一个简单的登录验证功能。Ajax，即Asynchronous JavaScript and XML（异步JavaScript和XML），允许我们在不刷新整个网页的情况下与服务器进行交互，从而提供更流畅的...
AJAX入门的简单实例（登录表单验证）
05-27
使用AJAX的 登录表单验证 简单案例 以登录界面为例，首先编写登录页面 login.jsp 如果登录成功，则界面显示登录成功后的页面 如果登录失败，则界面显示登录失败后的页面 在登录时，浏览器窗口不刷新，浏览器地址栏...
用AJAX实现页面登陆以及注册用户名验证的简单实例
10-21
总的来说，AJAX通过异步请求改变了传统的网页交互模式，使得页面可以在不完全刷新的情况下获取和更新数据，极大地优化了用户体验，尤其是在需要实时验证的场景下，如登录和注册过程中的用户名验证。通过封装AJAX函数...
使用AJAX（包含正则表达式）验证用户登录的步骤
10-16
本篇文章将详细阐述如何使用AJAX结合正则表达式来实现用户登录验证的步骤。首先，我们需要理解AJAX（Asynchronous JavaScript and XML）的基本原理，它允许我们在不刷新整个页面的情况下与服务器进行异步通信，从而...
使用Ajax完成简单的账号登录认证
Amazing66的博客
07-13 246
什么是Ajax？ Ajax：异步的js and xml 通俗的说 就是我们做出一个操作的时候不需要刷新页面 就可以及时的给出反馈 导包 首先我们需要导入Jquary的配置文件 可以引用在线cdn，也可以提前下载 <script src="https://code.jquery.com/jquery-3.1.1.min.js"></script> 然后配置Springmvc的配置文件 <?xml version="1.0" encoding="UTF-8"?> &l.
jQuery+ajax实现简单登录验证
12-13
本人亲自写的jQuery+ajax实现登录验证，内含两个项目，注释清晰，特来和大家分享
Jquery+Ajax实现用户注册与登入（Asp.Net版）
07-21
非常实用的Jqery和Ajax的实现用户注册和登入功能。 另外附送美女图像一张，呵呵。
AJAX实现注册验证的例子
03-28
AJAX实现注册验证的例子 基础的AJAX 、适合 初学者学习 。注释很详细。
ajax请求实现登录注册
xiaobai_jq的博客
05-06 5191
之前是用form表单提交数据到后台，form表单提交会导致整个页面重新加载会显得不方便，如果不想要页面跳转，我们就用到了ajax请求，这边用的是jQuery ajax。之前页面做的也很丑，这次使用miniui前台框架完成。 ...
使用Ajax完成注册和登录
learn together
05-21 8982
简介 完成用户的登录和注册，以及个人信息的查询，并使用Ajax向后端提交JSON格式的数据。AJAX 是一种在无需重新加载整个网页的情况下，能够更新部分网页的技术。而JSON是一种轻量级的数据交换格式， 易于人阅读和编写，同时也易于机器解析和生成。 实现 控制器 @Autowired注解负责完成服务层成员变量的自动装配。 @RequestBody注解负责将前端发送过来的JSON数据封装到用户对象之中，以方便后端获取数据。 @ResponseBody注解负责给前端返回JSON数据对象。 package com
通过Ajax实现注册登陆的表单验证，一看就会。
最新发布
qq_60614034的博客
12-05 3040
ajax的简单应用，简单好懂。本次运用的软件为ideal，使用的是tomcat服务器，无框架编程。Asynchronous JavaScript And XML是一种通过JavaScript和后台进行通信的技术，能够实现页面的局部刷新，提高用户的体验常规页面刷新会更新整个页面。ajax技术通过浏览器局部发送请求给后台，后台通过resp.getWriter.print("");响应给前台页面 服务器具体实现代码： 浏览器代码： 注册代码： 登陆代码： 至于为什么要用jq
Ajax异步验证登陆或者注册
weixin_34262482的博客
03-02 525
首先介绍一个不错的学习Ajax的中文网站：http://www.w3school.com.cn/ajax/index.asp AJAX = 异步 JavaScript 和 XML。详细介绍见上面的网址即可； 1：首先介绍一下使用Javascript写的异步验证，然而在实际开发过程中很少用这种的，太过繁琐，但是依旧写一个吧！至少懂其原理哦！ 　　1.1：第一种方式：先说使用get方法向服务器发...
Ajax如何实现注册登陆验证
轻云流火 chitry
07-07 1197
jsp页面部分：通过JS进行客户端的表单验证，主要验证表单的格式、输入是否正确，使用这种方式可以避免在提交之后才返回一个简单的输入错误，在网速较慢的情况下更能提高效率。 page language="java" import="java.util.*" pageEncoding="UTF-8"%>@page language="java" contentType="text/html;
使用Ajax实时验证注册表单
"Ajax注册用户时实现表单验证" 在网页应用开发中，用户注册是常见的功能，为了提供良好的用户体验和保证数据的准确性，通常需要在用户输入时进行表单验证。Ajax（Asynchronous JavaScript and XML）技术使得在不...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值