ajax实现注册页面动态验证用户名是否已注册，不必提交即可验证。

最新推荐文章于 2020-10-18 09:09:10 发布
最新推荐文章于 2020-10-18 09:09:10 发布
阅读量186 收藏
点赞数
文章标签： java javascript web.xml ViewUI

今天学了一下ajax，感觉很爽啊。ajax真是很强大、

我首先就把我之前一直没解决的问题：如何在前台动态验证用户名是否已注册，而不必提交刷新之后再验证，上代码：

首先，jsp页面：

<%@ page language="java" import="java.util.*" pageEncoding="GB18030"%> <% String path = request.getContextPath(); String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/"; %> <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <base href="<%=basePath%>"> <title>My JSP 'index.jsp' starting page</title> <meta http-equiv="pragma" content="no-cache"> <meta http-equiv="cache-control" content="no-cache"> <meta http-equiv="expires" content="0"> <meta http-equiv="keywords" content="keyword1,keyword2,keyword3"> <meta http-equiv="description" content="This is my page"> <!-- <link rel="stylesheet" type="text/css" href="styles.css"> --> </head> <body> <input type="text" name="text1" id="text1id" οnblur="Ajaxtest1();"><br> <input type="text" name="text2" id="text2id" /><br> <%-- <input type="button" value="button" οnclick="Ajaxtest1();"><br>--%> <div id="div1"></div> </body> </html>
这个其实只是两个文本框，输入用、

下面是js代码。验证用的、

<script type="text/javascript"> var xmlhttprequest=null; function Ajaxtest1(){ if(window.ActiveXObject){//IE浏览器 xmlhttprequest=new ActiveXObject("Microsoft.XMLHTTP"); } else if(window.XMLHttpRequest){ xmlhttprequest=new XMLHttpRequest(); } if(null!=xmlhttprequest){ var text1=document.getElementById("text1id").value; var text2=document.getElementById("text2id").value; xmlhttprequest.open("GET", "testajax1?t1="+text1+"&t2="+text2, true); xmlhttprequest.onreadystatechange=ajaxcallback; //var tt=document.getElementById("text1").innerHTML; xmlhttprequest.send(null); } } function ajaxcallback(){ if(xmlhttprequest.readyState==4){ if(xmlhttprequest.status==200){ var text=xmlhttprequest.responseText; document.getElementById("div1").innerHTML=text; } } } </script>这个没什么可说的，唯一注意的一点就是xmlhttprequest.open("GET", "testajax1?t1="+text1+"&t2="+text2, true);

这里面的testajax1是servlet，注意这个地址需和web.xml保持一致。

接下来是testajax1.java

package com.guang.ajax; import java.io.IOException; import java.io.PrintWriter; import javax.servlet.ServletException; import javax.servlet.http.HttpServlet; import javax.servlet.http.HttpServletRequest; import javax.servlet.http.HttpServletResponse; import com.guang.sqlhelp.sqlhelp; import java.sql.*; public class testajax1 extends HttpServlet { public testajax1() { super(); } int i=0; public void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { request.setCharacterEncoding("gbk"); response.setContentType("text/html;charset=gbk"); PrintWriter out = response.getWriter(); //System.out.println("doGet"+i); i++; String t1=request.getParameter("t1"); //System.out.println(t1); //out.println("Hello World"); sqlhelp sp=new sqlhelp(); Connection conn=sp.getconn(); Statement sta=sp.getsta2(conn); String sql="select * from baseinfo where usernum='"+t1+"'"; ResultSet set=sp.getset(sta, sql); int j=0; if(set!=null){ try { set.last(); } catch (SQLException e) { e.printStackTrace(); } try { j=set.getRow(); } catch (SQLException e) { e.printStackTrace(); } if(j==1){ out.println("此学号已被注册，请换一个！！"); } else{ out.println("恭喜您，这个可以注册！"); } out.close(); } } }
那个。上面的也很简单，就是一个取数据的过程，唯一的一个就是验证行数。这个也可以其他的方法。

sqlhelp在这里我就不贴出来了。

ajuanlove
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
AJAX 实现动态刷新验证码
yyx19941129的博客
11-29 2286
前段时间做东西的时候与到一个问题，就是登陆界面的验证码刷新。 登录界面验证码怎么实现？     只需要定义一个  , 将图片的src指定为一个验证码的servlet即可 接下来介绍如何实现动态刷新验证码！ //Ajax验证码局部刷新     var xmlhttp;     function refreshCode() {         xmlhttp = ne
ajax判断用户名是否重复,并阻止提交
weixin_44665181的博客
06-03 1015
function unameValid() { var uname = document.getElementById("uname").value; var url = "<%=basePath%>user/yanzheng.action?uname=" + uname; loadXMLDoc(url); } function loadXM...
ajax实现注册用户名时动态显示用户名是否已经被注册（1、ajax可以实现我们常见的注册用户名动态判断）（2、jquery里面的ajax也是类似我们这样封装了的函数）...
weixin_34159110的博客
05-22 187
ajax实现注册用户名时动态显示用户名是否已经被注册（1、ajax可以实现我们常见的注册用户名动态判断）（2、jquery里面的ajax也是类似我们这样封装了的函数） 一、总结 1、ajax可以实现我们常见的注册用户名动态判断 2、jquery里面的ajax也是类似我们这样封装了的函数 二、ajax实现注册用户名时动态显示用户名是否已经被注册 练习：判断用户名是否存在...
Ajax应用案例——检测用户名是否已经被注册
成长，编程，生活
03-05 945
使用Ajax发送异步请求，检测用户名是否已经被注册。
ajax实现注册页面动态验证用户名是否已注册，不必提交即可验证
Astrual的专栏
09-16 871
今天学了一下ajax，感觉很爽啊。ajax真是很强大、 我首先就把我之前一直没解决的问题：如何在前台动态验证用户名是否已注册，而不必提交刷新之后再验证，上代码： 首先，jsp页面： [java] view plaincopyprint? "java" import="java.util.*" pageEncoding="GB18030"%>  String path
用AJAX实现页面登陆以及注册用户名验证的简单实例
10-21
在实现页面登录和注册时，AJAX常用于用户名验证。传统的验证方式是用户填写完信息后点击提交，整个页面会重新加载，然后显示出验证结果。如果使用AJAX，用户在输入用户名并提交后，后台可以立即检查用户名是否已被...
Ajax验证用户名或昵称是否已被注册
08-30
总结来说，Ajax验证用户名或昵称是否已被注册涉及到前端JavaScript的事件处理、XMLHttpRequest对象的使用，以及后端服务器的响应。通过这种方式，我们可以提供更好的用户体验，让用户在输入时即时得到反馈，而无需...
Ajax实现异步刷新验证用户名是否已存在的具体方法
10-26
由于要做一个注册页面，看到许多网站上都是使用Ajax异步刷新验证用户名是否可用的，所以自己也动手做一个小实例
Asp.net下利用Jquery Ajax实现用户注册检测（验证用户名是否存）
10-28
在Asp.net环境下开发网站时，用户注册功能通常需要验证用户名是否已经被占用。本教程将分享如何利用jQuery AJAX技术实现这一功能，以确保用户输入的用户名是唯一的。首先，我们来看一下关键的JavaScript部分，这部分...
AJAX动态表单验证
03-13
《AJAX and PHP - Building Responsive Web Applications》第四章源代码
Ajax和Json，实现检测用户名是否被占用
weixin_45067832的博客
10-18 493
AJAX: 1.概念：ASynchronous JavaScript And XML 异步的JavaScript 和 XML 异步和同步：客户端和服务器端相互通信的基础上 那么什么说异步，什么是同步呢？ 同步：客户端必须等待服务器端的响应。在等待的期间客户端不能做其他操作。 异步：客户端不需要等待服务器端的响应。在服务器处理请求的过程中，客户端可以进行其他的操作。 那么我们为什么要用AJAX呢？ Ajax 是一种在无需重新加载整个网页的情况下，能够更新部分网页的技术。通过在后台与服务器进行少量数据交换，Aj
利用jQuery动态检测用户名等是否存在
依韵
07-27 1091
一个初学者，摸索了好久。终于找到这么个
Ajax演示用户名是否被注册例子
用心做每件事
05-27 175
1、Ajax简介 AJAX即“AsynchronousJavascript And XML”（异步JavaScript和XML），是指一种创建交互式网页应用的网页开发技术。 AJAX = 异步 JavaScript和XML（标准通用标记语言的子集）。 AJAX 是一种用于创建快速动态网页的技术。 通过在后台与服务器进行少量数据交换，AJAX 可以使网页实现异步更新。这意味着可以在不重新加载...
AJax基于JavaScript实现注册时局部判断用户名是否已被使用
呜呜老司机的博客家园
04-13 2110
var xhr;//声明变量 //声明一个创建XMLHttpRequest对象的函数 function getXMLHttpRequest() { if (window.XMLHttpRequest) { return new XMLHttpRequest; } } function userInput(textName) { //获取文本框的值 var userNa
注册输入用户名动态校验是否存在（使用了异步校验）
丶博弈
03-12 3859
演示1.为输入框自定义校验规则（页面1）&lt;script type="text/javascript"&gt; /* 自定义校验规则，用于判断用户名是否存在(放到外联文件中没作用，原因不明？) */ $.validator.addMethod( //规则的名称 "check_login_userName", //校验的函数 function(value,element...
AJAX动态验证账号
weixin_43626356的博客
05-05 133
<script type="text/javascript"> var http_request = false; function createRequest(url) { http_request = false; if (window.XMLHttpRequest) { // 非IE浏览器 http_request = new XMLHttpRequest();...
使用Ajax 判断 用户名是否被占用
Hurricane_m的博客
05-26 742
一、原生JS view层：前台页面UserInfoAdd4JSAjax.jsp <%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%> <!DOCTYPE html> <html> <head&...
ajax php注册登录页面,用AJAX实现页面登陆以及注册用户名验证的简单实例
最新发布
05-31
好的，下面是一个基于 AJAX 和 PHP 的注册登录页面的简单实例： 1. HTML 页面 ```html <!DOCTYPE html> <html> <head> <title>AJAX PHP Register/Login Example</title> <script src="https://code.jquery.com/jquery-3.5.1.min.js"></script> <script> // 注册表单提交 $(document).on('submit', '#register-form', function(e){ e.preventDefault(); var username = $('#username').val(); var password = $('#password').val(); var confirmPassword = $('#confirm-password').val(); $.ajax({ type: 'POST', url: 'register.php', data: {username: username, password: password, confirm_password: confirmPassword}, dataType: 'json', success: function(response){ if(response.success){ alert('注册成功！'); }else{ alert(response.error); } } }); }); // 登录表单提交 $(document).on('submit', '#login-form', function(e){ e.preventDefault(); var username = $('#username').val(); var password = $('#password').val(); $.ajax({ type: 'POST', url: 'login.php', data: {username: username, password: password}, dataType: 'json', success: function(response){ if(response.success){ alert('登录成功！'); }else{ alert(response.error); } } }); }); // 用户名验证 $(document).on('blur', '#username', function(){ var username = $(this).val(); $.ajax({ type: 'POST', url: 'check_username.php', data: {username: username}, dataType: 'json', success: function(response){ if(!response.success){ alert(response.error); } } }); }); </script> </head> <body> <h2>注册</h2> <form id="register-form"> <div> <label for="username">用户名：</label> <input type="text" id="username" name="username" required> </div> <div> <label for="password">密码：</label> <input type="password" id="password" name="password" required> </div> <div> <label for="confirm-password">确认密码：</label> <input type="password" id="confirm-password" name="confirm_password" required> </div> <button type="submit">注册</button> </form> <h2>登录</h2> <form id="login-form"> <div> <label for="username">用户名：</label> <input type="text" id="username" name="username" required> </div> <div> <label for="password">密码：</label> <input type="password" id="password" name="password" required> </div> <button type="submit">登录</button> </form> </body> </html> ``` 2. PHP 后端代码 - `register.php` ```php <?php // 获取提交的数据 $username = $_POST['username']; $password = $_POST['password']; $confirmPassword = $_POST['confirm_password']; // 校验数据 if(empty($username) || empty($password) || empty($confirmPassword)){ die(json_encode(['success' => false, 'error' => '用户名或密码不能为空'])); } if($password !== $confirmPassword){ die(json_encode(['success' => false, 'error' => '两次输入的密码不一致'])); } // 此处省略数据库操作，假设注册成功 echo json_encode(['success' => true]); ``` - `login.php` ```php <?php // 获取提交的数据 $username = $_POST['username']; $password = $_POST['password']; // 此处省略数据库操作，假设登录成功 echo json_encode(['success' => true]); ``` - `check_username.php` ```php <?php // 获取提交的数据 $username = $_POST['username']; // 此处省略数据库操作，假设用户名已存在 echo json_encode(['success' => false, 'error' => '用户名已存在']); ``` 以上代码仅供参考，实际开发中需要根据具体需求进行适当修改。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值