基于登录注册用ajax实现手机验证码功能

最新推荐文章于 2023-05-29 14:56:58 发布
最新推荐文章于 2023-05-29 14:56:58 发布
阅读量1.4k 收藏 13
点赞数 5
分类专栏： Java后端 文章标签： java js web
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/MiSiTeLin/article/details/104242960
版权

文章目录


这几天做的项目接触到了用手机验证码完成一些功能，例如登录、注册、以及修改手机号码，想把流程总结出来分享给大家

基于登录发送验证码

操作手机号
登录非空、格式正确、已注册

先用ajax获取框输入的手机号码提交到controller处理，部分jsp代码如下

<input type="hidden" id="u-name-reg-first" value="0" /><!--第一次输入的号码-->
<input type="text" name="key" placeholder="手机号" value=''/>
<a type="button" onclick="sendPhoneCodelogin()" titlelogin="登陆">登陆</a>

第一个框中用于双重验证号码，在点击发送信息时将第二个框中输入的号码赋值
给它，防止发送信息后改动号码
js中代码：

		/**
		* 发送手机验证码
		*/
		function sendPhoneCode() {
		 var mobileVal=$("#u-name-reg").val();//输入的号码
		 var pageFrom = "phoneLogin";//页面来源
		 $("#u-name-reg-first").val(mobileVal);//给第一次号码赋值
		 $.ajax({
		     url:baselocation+'/login/ajax/sendPhoneMsg',
		     type:'post',
		     dataType:'json',
		     data:{
		         "mobileVal":mobileVal,
		         "pageFrom":pageFrom
		     },
		     success:function(result){
		         if(result.success==true){
		             layer.msg(result.message, {icon: 1, shift: 6});
		             var timeTicket;
		             var timeNum = 60;
		             clearInterval(timeTicket);
		             /*当点击获取验证码后设置60秒计时不可点击*/
		             timeTicket = setInterval(function () {
		                 if (timeNum>1){
		                     timeNum--;
		                     /*设置按钮不可点击*/
		                     $(".mobile-yz-btn").addClass("mobile-yz-btn-no");
		                     $(".mobile-yz-btn").attr("onclick","");
		                     $(".mobile-yz-btn").text(timeNum+"秒后重新获取");
		                 }else if (timeNum==1){
		                     $(".mobile-yz-btn").text("点击获取验证码");
		                     $(".mobile-yz-btn").attr("onclick","sendPhoneRegister()");
		                     $(".mobile-yz-btn").removeClass("mobile-yz-btn-no");
		                     timeNum = 60;
		                     clearInterval(timeTicket);
		                     //刷新验证码
		                     $(".js-verify-refresh.c-green").click();
		                 }
		             },1000);
		          }else{
		             layer.msg(result.message, {icon: 5, shift: 6});
		         }
		     }
		 })
		}

消息成功发送后，提交按钮的文本框显示倒计时时间，每隔一秒触发一次事件，60秒后计时结束
在conreoller中：

//发送手机验证码
@RequestMapping("/login/ajax/sendPhoneMsg")
@ResponseBody
	public Map<String,Object> sendPhoneMsg(HttpServletRequest request) throws ClientException {
		 Map<String,Object> json;
		   //获取手机号
		   String mobile=request.getParameter("mobileVal");
		   if(StringUtils.isEmpty(mobile)){
		       json = this.setJson(false,"号码不能为空", null);
		       return json;
		   }
		   if(!WebUtils.checkMobile(mobile)){
		       json = this.setJson(false, "号码格式错误", null);
		       return json;
		   }
		   //获取页面来源
		   String pageFrom=request.getParameter("pageFrom");
		   if(pageFrom!=null){
		       if(pageFrom.equals("register")){
	                String userName = request.getParameter("nameVal");
	                if(userService.checkUsername(userName)){
	                    json = this.setJson(false,"该用户名已注册", null);
	                    return json;
	                }
	                if(userService.checkMobile(mobile)){
	                    json = this.setJson(false,"该号码已注册", null);
	                    return json;
	                }
           	   }
		       if(pageFrom.equals("phoneLogin")){
		           if(!userService.checkMobile(mobile)){
		               json = this.setJson(false,"该号码未注册", null);
		               return json;
		           }
		       }
		   }
		   json=userService.sendMobileCode(mobile,"_mobileCodeNum");
		   return json;
	}

进行号码判空和格式处理，同时根据pageFrom参数获取页面来源，根据“登录”或“注册”页面进行号码判断。若不符合要求则无法发送信息；若通过则调用sendMobileCode方法进行信息发送

	@Override
	public Map<String, Object> sendMobileCode( String mobile, String cachePostfix) 				throws ClientException {

		Map<String, Object> json = new HashMap<String, Object>();
		String mobileCodeNum = "";
		//获得验证码
		mobileCodeNum = WebUtils.getRandomNum(4);//随机验证码4为数
		//先删除之前的验证码缓存
		String usedMobileCodeNum = (String) cache.get(mobile+"_mobileCodeNum");
		cache.remove(usedMobileCodeNum);
		//将验证码存入缓存
		cache.set(mobile + cachePostfix, mobileCodeNum, 300);
		SendSmsResponse sendSmsResponse = sendSms(mobile, mobileCodeNum);
		if (sendSmsResponse.getCode() != null && sendSmsResponse.getCode().equals("OK")) {
			//请求成功
			json.put("success", Boolean.valueOf(true));
			json.put("message", "短信发送成功");
			json.put("entity", null);
			return json;
		}
		json.put("success", Boolean.valueOf(false));
		json.put("message", "短信发送失败，请重试");
		json.put("entity", null);

		return json;
	}

生成随机验证码：

/**获取k位由0-9的随机数字拼成的符串*/
	public static String getRandomNum(int k){
		String RandomNum = "";
		for (int i=0;i<k;i++){
			Random rd = new Random();
			RandomNum += (int)Math.floor(rd.nextInt(9));
		}
		return RandomNum;
	}

返回的json到ajax中，用

layer.msg(result.message, {icon: 1, shift: 6});

layer.msg(result.message, {icon: 5, shift: 6});
表示发送成功或失败
在这里插入图片描述
在这里插入图片描述

输入验证码后完成登录逻辑

用户登录条件
操作号码验证码
登录非空、格式、与第一次输入相同非空、正确

js中代码：

	/**
     * 根据手机号和验证码登陆
     */
    function sendPhoneCodelogin() {
        var mobileVal=$("#u-name-reg").val();//手机号
        var mobileCode=$("#pp-randomcode-reg").val();//验证码
        var firstMobile = $("#u-name-reg-first").val();//第一次输入的号码
        $.ajax({
            url:baselocation+'/user/ajax/phonelogin',
            type:'post',
            dataType:'json',
            data:{
                "mobileVal":mobileVal,
                "mobilecode":mobileCode,
                "firstMobile":firstMobile
            },
            success:function(result){
                if(result.success==true){
                    window.location.href="${ctx}";
                }else{
                    layer.msg(result.message, {icon: 5, shift: 6});
                }
            }
        })
    }

controller中代码：

	/**
	 * 手机号登录
	 */
	@RequestMapping("/phonelogin")
	@ResponseBody
	public Map<String,Object> phoneLogin(HttpServletRequest request, HttpServletResponse response){
		Map<String,Object> json = new HashMap<String,Object>();
		Map<String,Object> map = new HashMap<String, Object>();
		try{
			//获取手机号
			String mobile=request.getParameter("mobileVal");
            //第一次输入的号码
            String firstMobile = request.getParameter("firstMobile");
            //验证码
			String mobileCode=request.getParameter("mobilecode");
			//从缓存提取手机验证码
			String mobileCodeNum = (String) cache.get(mobile+"_mobileCodeNum");
			if(StringUtils.isEmpty(mobile)){
				json = this.setJson(false,"号码为空","mobile");
				return json;
			}
			if(!WebUtils.checkMobile(mobile)){
				json = this.setJson(false, "号码格式错误", null);
				return json;
			}
			if(StringUtils.isEmpty(firstMobile) || !mobile.equals(firstMobile)){
				json = this.setJson(false, "系统错误", null);
				return json;
			}
            if(StringUtils.isEmpty(mobileCode)){
                json = this.setJson(false, "验证码为空", null);
                return json;
            }
			if (mobileCode.equals(mobileCodeNum)){
				userService.phonelogin(mobile);
				cache.remove(mobile+"_mobileCodeNum");
			}else{
				json = this.setJson(false,"验证码错误","mobile");
				return json;
			}
			//进行登录操作
			map.put("ipForget","true");
			map.put("mobile",mobile);
			map.put("request",request);
			map.put("response",response);
			map=userService.queryDoUserLoginByMobile(map);
			json = this.setJson((boolean)map.get("success"), (String)map.get("message"), map);
			WebUtils.setCookie(response, UserCacheConstans.WEB_USER_LOGIN_PREFIX, (String) map.get("uuid"), 1);
		}catch (Exception e) {
			this.setAjaxException(json);
			logger.error("getVipInfo()---error",e);
		}
		return json;
	}

1.若条件不符合返回相应的信息回到ajax并用
layer.msg(result.message, {icon: 5, shift: 6});
弹框显示错误信息
2.若条件符合且验证码正确，将该用户数据封装在map对象中，调用queryDoUserLoginByMobile方法，执行登录操作

	/**
	 * 手机号登录操作
	 */
	public Map<String,Object> queryDoUserLoginByMobile(Map<String,Object> parameterMap) throws Exception {
		Map map = new HashMap();
		//--在线人数统计/限制 开始--
		if(!OnlineUtil.ckeckLimit(map)) {
			return map;
		}
		//--在线人数统计/限制 结束--
		HttpServletRequest request = (HttpServletRequest)parameterMap.get("request");
		HttpServletResponse response = (HttpServletResponse)parameterMap.get("response");
		String ipForget = (String)parameterMap.get("ipForget");
		String mobile = (String)parameterMap.get("mobile");
		User user = userMapper.queryUserByEmailOrMobile(mobile);//通过号码查询用户
		String account = user.getUserName();														
		String prefix = WebUtils.getCookie(request, UserCacheConstans.WEB_USER_LOGIN_PREFIX);
		if(StringUtils.isNotEmpty(prefix)){
			cache.remove(prefix);
		}
		if(user.getIsavalible()==2){
			map.put("success",false);
			map.put("message","该帐号已被禁用");
			return map;
		}
		cache.remove(UserCacheConstans.NAME_OR_PASS_ERR_COUNT+account);
		return queryDoLogin(user,ipForget,response,request);
	}

User user = userMapper.queryUserByEmailOrMobile(mobile);
由于号码是唯一的，所有根据号码查询获取该用户
user.getIsavalible()
若该账号被禁用，登录失败
return queryDoLogin(user,ipForget,response,request);
若该账号不被禁用，删除之前该用户的缓存，执行登录操作

	/**
	 * 登陆操作
	 */
	public Map queryDoLogin(User user, String ipForget, HttpServletResponse response, HttpServletRequest request)throws Exception{
		Map map = new HashMap();
		//用户密码不能让别人看到
		user.setPassword("");
		String uuid = RandomUtils.simpleUUID();
		//当前时间戳
		Long currentTimestamp=System.currentTimeMillis();
		user.setLoginTimeStamp(currentTimestamp);
		//当前时间
		user.setLoginDatatime(new Date());
		//客户端登录时间
		String userLoginDatatime = URLEncoder.encode(DateUtils.format(user.getLoginDatatime(),"yyyy-MM-dd HH:mm:ss"),"UTF-8").replaceAll("\\+",  "%20");
		if("true".equals(ipForget)){
			//缓存用户
			cache.set(uuid, user,UserCacheConstans.userTime);
			//缓存用户cookie key(后台获取后，可以清除登录用户的缓存)
			cache.set(UserCacheConstans.WEB_USER_LOGIN_PREFIX+user.getUserId(), uuid,UserCacheConstans.userTime);
			WebUtils.setCookie(response, UserCacheConstans.WEB_USER_LOGIN_PREFIX, uuid, (UserCacheConstans.userTime/60/60/24));
			WebUtils.setCookie(response, UserCacheConstans.WEB_USER_LOGINDATATIME, userLoginDatatime , (UserCacheConstans.userTime/60/60/24));
		}else{
			//缓存用户
			cache.set(uuid, user,86400);
			//缓存用户cookie key(后台获取后，可以清除登录用户的缓存)
			cache.set(UserCacheConstans.WEB_USER_LOGIN_PREFIX+user.getUserId(), uuid,UserCacheConstans.userTime);
			WebUtils.setCookie(response, UserCacheConstans.WEB_USER_LOGIN_PREFIX, uuid, 1);
			WebUtils.setCookie(response, UserCacheConstans.WEB_USER_LOGINDATATIME, userLoginDatatime , 1);
		}
		loginCommonOperate(request,user);
		// 登录时把cookie中的购物车信息加到数据库中
		shopcartService.addTempShopCart(request, response, Long.valueOf(user.getUserId()));
		map.put("success",true);
		map.put("message","登陆成功");
		map.put("user",user);
		map.put("uuid",uuid);

		//--在线人数统计/限制 开始--
		OnlineUtil.resetOnline(request, response, user.getUserId());
		//--在线人数统计/限制 结束--
		
		return map;
	}

将各种信息写入到缓存中，返回“登录成功”的信息

	if(result.success==true){
            window.location.href="${ctx}";
    }

登录成功后，跳转到网站首页

基于注册发送验证码

操作账号密码确认密码手机号
注册非空、格式 、未注册非空、格式非空、格式、与第一次输入相同非空、格式、未注册

jsp中：

<input id="u-name-reg" type="text" name="key" placeholder="请输入账号（英文、数字、减号或下划线且6-24个字符）" value=''  class="name-input" autocomplete="off"/>
<input id="u-password-reg" type="password" name="key" placeholder="请输入密码（包含字母、数字且不小于8位）" value='' class="bui-input"  autocomplete="off"/>
<input id="u-password-reg-again" type="password" name="key" placeholder="请确认密码" value='' style="margin:20px 0px" class="bui-input" autocomplete="off"/>
<input id="u-phone-reg" type="text" name="key" placeholder="请输入手机号码" value=''  class="name-input" autocomplete="off"/>
<input id="pp-randomcode-reg" class="name-input" placeholder="请输入验证码" name="" value="" onkeyup="$(this).next().next().next().html('');" maxlength="4" type="text">
<a class="vam ml10 disIb fl mobile-yz-btn" href="javascript:void(0)" onclick="sendPhoneCode()" title="">点击获取验证码</a>
<a class="loginBtn" type="button" onclick="Register()" title="注 册">注册</a>

1.可以同上面所说的“登录”一样将获取到的值通过ajax发送到controller中处理，再将结果返回
2.可以在js的function()中获取各个框中输入的值作判断处理，若不符合要求则无法跳到controller中处理，本例采用这种方式

 //发送验证码
    function sendPhoneCode() {
        var pageFrom = "register";
		var mobileVal=$("#u-phone-reg").val();
		
        var nameVal = $("#u-name-reg").val();
        if (nameVal == null || nameVal == "") {
            layer.msg("请输入账号", {icon: 5, shift: 6});
            return;
        }
        if (!isNaN(nameVal)) {
            layer.msg("账号不能全为数字", {icon: 5, shift: 6});
            return;
        }
        if (nameVal.length < 6 || nameVal.length > 24) {
            layer.msg("账号长度为6-24个字符", {icon: 5, shift: 6});
            return;
        }
        if (usernameRegex.test(nameVal) == false) {//账号格式
            layer.msg("账号仅支持英文、数字、减号或下划线", {icon: 5, shift: 6});
            return;
        }
        var password = $("#u-password-reg").val();
        if (password == null || password == "") {
            layer.msg("请输入密码", {icon: 5, shift: 6});
            return;
        }
        password = encrypt(password);
        var passwordAgain = $("#u-password-reg-again").val();
        if (passwordAgain == null || passwordAgain == "") {
            layer.msg("请确认密码", {icon: 5, shift: 6});
            return;
        }
        passwordAgain = encrypt(passwordAgain);
        if (password!=passwordAgain) {
            layer.msg("两次密码不一致", {icon: 5, shift: 6});
            return;
        }
        $.ajax({
            url:baselocation+'/login/ajax/sendPhoneMsg',
            type:'post',
            dataType:'json',
            data:{
                "nameVal":nameVal,
                "mobileVal":mobileVal,
                "pageFrom":pageFrom
            },
            success:function(result){
                if(result.success==true){
                    layer.msg("短信发送成功", {icon: 1, shift: 6});
                    var timeTicket;
                    var timeNum = 60;
                    //$("#phoneClick").css("visibility","hidden");
                    // $("#recoverPhoneClick").css("visibility","visible");
                    clearInterval(timeTicket);
                    /*当点击获取验证码后设置60秒计时不可点击*/
                    timeTicket = setInterval(function () {
                        if (timeNum>1){
                            timeNum--;
                            /*设置按钮不可点击*/
                            $(".mobile-yz-btn").addClass("mobile-yz-btn-no");
                            $(".mobile-yz-btn").attr("onclick","");
                            $(".mobile-yz-btn").text(timeNum+"秒后重新获取");
                        }else if (timeNum==1){
                            $(".mobile-yz-btn").text("点击获取验证码");
                            $(".mobile-yz-btn").attr("onclick","sendPhoneRegister()");
                            $(".mobile-yz-btn").removeClass("mobile-yz-btn-no");
                            timeNum = 60;

                            clearInterval(timeTicket);

                            //刷新验证码
                            $(".js-verify-refresh.c-green").click();
                        }
                    },1000);
                }else{
                    layer.msg(result.message, {icon: 5, shift: 6});
                }
            }
        })
    }

其余代码跟登录相似，只是pageFrom的值不同，这样controller中才会根据不同页面对“用户名”和“手机号”作判断。若该账号或手机号已注册，则无法发送验证码，相比在点击“注册”时对之作判断，可以减少很多“无用”信息

		if(pageFrom.equals("register")){
              String userName = request.getParameter("nameVal");
              if(userService.checkUsername(userName)){
                  json = this.setJson(false,"该用户名已注册", null);
                  return json;
              }
              if(userService.checkMobile(mobile)){
                  json = this.setJson(false,"该号码已注册", null);
                  return json;
              }
          }

输入验证码后完成注册逻辑

用户注册条件
操作号码验证码
注册非空、格式、未注册、与发送验证码的号码相同非空、正确

其余逻辑均与“登录”时相似，注册成功后，登录该用户，显示主页面

Tips:本人第一篇博客，若有不足之处，欢迎大家予以斧正。

jf-lin
关注
  • 5
    点赞
  • 踩
  • 13
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
web/java/jsp实现发送手机短信验证码和邮箱验证码的注册登录功能
02-23
使用JSP创建注册和登录页面，添加表单供用户输入手机号或邮箱、图形验证码（防止机器人自动提交）以及接收验证码的输入框。表单提交后，通过AJAX异步请求发送验证码，避免页面刷新。 5. **验证过程**： 用户输入...
验证码登录开发----手机验证码登录
秃头青年的学习记录博客
04-19 2229
前面我们已经完成了LoginCheckFilter过滤器的开发，此过滤器用于检查用户的登录状态。我们在进行手机验证码登录时，发送的请求需要在此过滤器处理时直接放行。开发手机验证码登录功能，其实就是在服务端编写代码去处理前端页面发送的这2次请求即可。为了方便用户登录，移动端通常都会提供通过手机验证码登录的功能。输入手机号>获取验证码>输入验证码>点击登录>登录成功。在开发业务功能前，先将需要用到的类和接口基本结构创建好。注意：通过手机验证码登录，手机号是区分不同用户的标识。业务层接口UserService。
bootstrap+jquery+ajax跨域实现短信验证码登录
冷月心的博客
02-15 2827
bootstrap+jquery+ajax跨域实现短信验证码登录
ajax实现用户登录
lowser1的博客
01-05 3141
1.首先编写好html需要的基础样式,导入jquery链接 2.给获取验证码的输入框添加一个点击事件,添加一个函数,我们所有的操作都要在这个函数内执行,,判断用户输入的手机号是否正确,这里用到了正则表达式,也可以用普通的判断, 然后我们创建ajax对象请求数据,readyState为4,代表已经连接上服务器了,status为200,代表服务器已经给前端返回了数据,我们在将获取到的json数组转成对象,再把服务器传给前端的验证码的值拿出来,自动弹出到验证码输入框, 然后我们编写倒计时的j..
【从零开始分析项目实战】12-阿里云手机验证码登录功能的实现
weixin_47418550的博客
05-16 1622
（1）短信服务介绍 目前市面上有很多第三方提供的短信服务，这些第三方短信服务会和各个运营商（移动，联通，电信）对接，我们只需要注册成为会员并且按照提供的开发文档进行调用就可以发送短信。需要说明的是，这些短信服务一般都是收费服务 常用短信服务：阿里云，华为云，腾讯云，京东，梦网，乐信 阿里云短信服务介绍.
AJAX——接口化开发(短信验证与用户注册)
云中自有锦书
08-11 501
接口化开发 请求地址即所谓的接口，通常我们所说的接口化开发，其实是指一个接口对应一个功能， 并且严格约束了请求参数 和响应结果 的格式，这样前后端在开发过程中，可以减少不必要的讨论， 从而并行开发，可以极大的提升开发效率，另外一个好处，当网站进行改版后，服务端接口进行调整时，并不影响到前端的功能。 获取短信验证码 需求文档(产品) 总需求：点击获取验证码按钮，向服务端发送请求, 调用服务...
JS 验证码功能的三种实现方式
10-17
JS验证码功能的实现方式在网页开发中至关重要，它可以有效防止恶意自动化操作，确保用户身份的安全性。本文将详细介绍三种常见的验证码实现方式：数字短信验证码、图形验证码以及滑动验证码。 一、数字短信验证码 ...
destoon7.0注册添加短信验证码验证功能.zip
04-13
通过这些步骤，Destoon 7.0 注册添加手机验证码功能得以实现，大大增强了系统的安全性。对于企业网站来说，这不仅能保护用户账户不被滥用，也能减少垃圾信息的产生，提高网站的整体运营效率。因此，掌握如何在 ...
java手机验证码注册实例(ssm)
07-07
Java手机验证码注册实例是基于Spring、SpringMVC和MyBatis（SSM）框架实现的一种常见用户注册功能。在这个实例中，我们通过发送短信验证码到用户的手机号码来验证用户身份，增强注册的安全性。以下是对这个实例涉及...
基于jQuery实现发送短信验证码后的倒计时功能(无视页面关闭)
11-22
在本文中，我们将探讨如何使用jQuery来实现一个发送短信验证码后的倒计时功能，即使在用户关闭页面后也能继续计时。这个功能对于确保用户在规定时间内完成验证过程至关重要，尤其是在涉及安全敏感操作如账户注册或...
js ajax实现短信验证码功能
季小沫的博客
10-14 2万+
这是一个简单的前台短信验证码功能 ajax实现异步处理 （发送和校验）js代码<script type="text/javascript"> var InterValObj; //timer变量，控制时间 var count = 60; //间隔函数，1秒执行 var curCount;//当前剩余秒数 function sendMessage() { curCount = count; //
ajax异步请求案例,AJAX实现简单的注册页面异步请求实例代码
weixin_32450633的博客
08-05 354
AJAX简介(1)AJAX = 异步 JavaScript 和 XML。(2)AJAX 是一种用于创建快速动态网页的技术。(3)通过在后台与服务器进行少量数据交换，AJAX 可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下，对网页的某部分进行更新。(4)传统的网页(不使用 AJAX)如果需要更新内容，必需重载整个网页面。简单布局JS先判断,把前端可以的判断做,减少服务器的交互$('...
AJAX原理及实现用户注册
弱水三千、先干为敬
09-15 882
1、AJAX 1.1 AJAX相关概念 （1） 为什么要有AJAX 有需求实现刷新页面中的局部,但是传统的请求方式只能通过刷新整个页面达到改变内容的目的,于是就又了AJAX。用于（时间倒计时,点赞功能,邮箱用户名验证等等） （2） AJAX特点 异步加载,局部刷新 1.通过发送请求,获取响应的一种浏览器交互技术 2.异步:ajax请求,并不阻断我们继续对浏览器进行操作. （3） Ajax的使用 1...
jQuery+AJAX技术（简单的用户注册功能）
m0_53156691的博客
04-10 2174
另一种就是这里用到的AJAX异步传输数据，同时接收服务器返回数据，不会刷新页面，能保留之前的数据，不影响页面的继续操作。客户端页面接收到了服务器传输回来的数据并作出了响应结果，此时页面并没有刷新，即输入的用户名仍然存在输入框中，这里就体现了AJAX的异步功能）短地说，在不重载整个网页的情况下，AJAX 通过后台加载数据，并在网页上进行显示，并且实现的是对部分网页的更新，编写常规的 AJAX 代码并不容易，并且不同的浏览器对 AJAX 的实现并不相同。，同时您能够把这些外部数据直接载入网页的被选元素中。
前端jQuery AJAX和后端Servlet技术完成异步登录注册程序
qq_54992178的博客
05-29 1968
使用div+css按图2进行布局，点击“注册”按钮发起AJAX提交注册，由于需要上传文件，所以需要，提交之前先做数据验证，确保用户名、密码、确认密码必填， Email如果填写了，要符合Email格式（由于同时要提交图片，此处须使用DataForm进行提交）。（1）创建网页，创建网页文件login.html或使用课堂练习3的login.jsp，对应的servlet接口文件verify.java或使用课堂练习3的verify.java，以及接口消息所使用的消息类message.java，
Ajax实现用户注册（详细版）
weixin_30896511的博客
09-06 551
随着信息技术的发展，网络时代和我的生活密切相关，在讲解ajax之前先 chitchat 下，呼呼。。现在真是信息大爆炸的时代，想了解什么，或者想学习下什么只要你走进网络，轻松挥动鼠标，点击 search 即可搞定，而用ajax实现的搜索速度快，减轻的客户端与服务端的负荷作用。下面用一个实例说明实现ajax无刷新用户验证 ajax.js Code Code 1/**//**...
前端利用ajax实现用户注册页面
qq_43614949的博客
07-29 5345
开发一个用户注册界面，使用ajax交互技术 ajax是什么呢？允许浏览器与服务器通信而无须刷新前页面的技术都被叫做Ajax. AJAX:(Asynchronous JavaScript and XML)并不是一项新技术,其实是多种技术的综合，包括Javascript、XHTML和CSS、DOM、XML和XMLHttpRequest. 首先Ajax请求的步骤： (1)创建XMLHttpRequest对象,也就是创建一个异步调用对象； (2)创建一个新的HTTP请求,并指定该HTTP请求的方式、URL及验证信息
最新web/java/jsp实现发送手机短信验证码和邮箱验证码的注册登录功能（详细）
热门推荐
空空说技术的博客
02-23 3万+
最新web/java/jsp实现发送手机短信验证码和邮箱验证码的注册登录功能（详细） 最近几天有人需要帮忙做一个关于发送验证码的功能，之前没有做过，于是我鼓捣一阵子，记录一下关于web项目中注册登录常用的手机验证码和邮箱验证码的发送。 作为一个演示项目，我没有使用任何框架，用了一个简单的jsp+Servlet，当然用boostrap美化了一下。代码带有注释，非常简单易懂。 一、手机验证码 由于手机...
（一）JavaScript+JSON +JQuery Ajax实现登录
weixin_56110008的博客
12-29 1154
JavaScript+JSON +JQuery Ajax实现登录
ssm+ajax实现登录注册功能
最新发布
06-06
实现登录注册功能，可以按照以下步骤进行操作： 1. 搭建基本的SSM环境。SSM分别是Spring、SpringMVC和MyBatis的缩写，是一种常用的Java Web开发框架。 2. 编写前端页面，使用HTML、CSS和JavaScript实现用户界面。 ...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值