ajax异步servlet请求，并获取手机短信验证码

最新推荐文章于 2021-08-05 13:18:19 发布
最新推荐文章于 2021-08-05 13:18:19 发布
阅读量826 收藏 4
点赞数
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_40302523/article/details/83312045
版权

ajax异步servlet请求并获取手机短信验证码

   通过jquery、ajax传递数据，异步请求servlet；并通过阿里云短信服务api获取手机短信验证码

前端html

<html>
<head>
    <title>ajax异步servlet获取短信验证码</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <link rel="stylesheet" media="screen" href="css/css.css"/>
</head>
<form id="msform" action="" method="post">
    <label>手机号码</label>
    <input type="text" id="phone" name="phone" maxlength="11" placeholder="请输入你的手机号码">
    <input id="c_code_msg" type="text" class="c_code_msg" name="c_code_msg" placeholder="输入验证码">
    <button type="button" class="msgs">
        获取短信验证码
    </button>
</form>
<script>
    $().ready(function () {
        $("#msform").validate({
            rules: {
                phone: {
                    required: true,
                    minlength: 11
                },
                c_code_msg: {
                    required: true
                },
                "topic[]": {
                    required: "#newsletter:checked",
                    minlength: 2
                },
                agree: "required"
            },
            messages: {
                phone: {
                    required: "请输入电话号码",
                    minlength: "请输入正确的电话号码"
                },
                c_code_msg: {
                    required: "请输入验证码"
                }
            }
        });
    });
    $(function () {
        //获取短信验证码
        var validCode = true;
        $(".msgs").click(function () {
            var phone = $("#phone").val();
            if (phone == "") {
                alert(" 请输入手机号！")
            } else if (phone.length == 11) {
                //ajax异步请求servlet
                $.ajax({
                    url: "CodeServlet",
                    type: "post",
                    data: {phone: phone},
                    success: function (data) {
                        if (data != null) {
                            alert(data)
                        }
                    }, error: function () {
                        alert("发送未知错误！ 无法发送验证码！")
                    }
                });
                //定义计数器
                var time = 60;
                var code = $(this);
                if (validCode) {
                    validCode = false;
                    code.addClass("msgs1");
                    var t = setInterval(function () {
                        time--;
                        code.html(time + "秒");
                        if (time == 0) {
                            clearInterval(t);
                            code.html("重新获取");
                            validCode = true;
                            code.removeClass("msgs1");
                        }
                    }, 1000)
                }
            } else {
                alert(" 请输入正确的手机号码！")
            }
        })
    })
</script>
<style>
    .error {
        color: red;
    }
</style>
</body>
</html>

ajax异步部分代码块

//ajax异步请求servlet
                $.ajax({
                    url: "CodeServlet",
                    type: "post",
                    data: {phone: phone},
                    success: function (data) {
                        if (data != null) {
                            alert(data)
                        }
                    }, error: function () {
                        alert("发送未知错误！ 无法发送验证码！")
                    }
                });

servlet代码块

import com.aliyuncs.dysmsapi.model.v20170525.SendSmsRequest;
import com.aliyuncs.dysmsapi.model.v20170525.SendSmsResponse;
import com.google.gson.JsonObject;
import north.asahi.Util.Code_Message.CodeMessgeUtil;
import north.asahi.Util.RandomUtil;
import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import java.io.IOException;

@WebServlet(name = "CodeServlet", urlPatterns = "/CodeServlet")
public class CodeServlet extends HttpServlet {
    protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        request.setCharacterEncoding("utf-8");
        //获取前台传来的数据(手机号)
        String phone = request.getParameter("phone");
       
            RandomUtil randomCode = new RandomUtil();
            SendSmsRequest srequest = new SendSmsRequest();
            //产生验证码
            String code = randomCode.getRandNum(6);
            //获取电话号码
            srequest.setPhoneNumbers(phone);
            JsonObject params = new JsonObject();
            params.addProperty("code", code);
            srequest.setTemplateParam(params.toString());
            System.out.println(code);
            SendSmsResponse sresponse = CodeMessgeUtil.sendSms(srequest);
            if ("OK".equals(sresponse.getCode())) {
                response.getWriter().write("短信发送成功");
            } else {
                response.getWriter().write("手机号输入有误-无法发送短信");
                System.out.println("输入有误-无法发送短信");
            }   
    }
    protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        doPost(request, response);
    }
}

调用阿里云短息服务获取验证码代码块

import com.aliyuncs.DefaultAcsClient;
import com.aliyuncs.IAcsClient;
import com.aliyuncs.exceptions.ClientException;
import com.aliyuncs.profile.DefaultProfile;
import com.aliyuncs.profile.IClientProfile;
import com.aliyuncs.dysmsapi.model.v20170525.SendSmsRequest;
import com.aliyuncs.dysmsapi.model.v20170525.SendSmsResponse;
public class CodeMessgeConfig {
    private CodeMessgeConfig() {
    }
    static final String product = "Dysmsapi";
    static final String domain = "dysmsapi.aliyuncs.com";
    static final String signName = "************";//你的短信签名
    static final String templateCode1 = "************";//你的短信模版
    static final String accessKeyId = "************";//你的accessKeyId
    static final String accessKeySecret = "************";//你的accessKeySecret
    static final IClientProfile profile = DefaultProfile.getProfile("cn-hangzhou", accessKeyId, accessKeySecret);
    static {
        try {
            System.setProperty("sun.net.client.defaultConnectTimeout", "10000");
            System.setProperty("sun.net.client.defaultReadTimeout", "10000");
            DefaultProfile.addEndpoint("cn-hangzhou", "cn-hangzhou", product, domain);
        } catch (ClientException e) {
            e.printStackTrace();
        }
    }
    public static IAcsClient getAcsClient() {
        return SingletonHolder.acsClient;
    }
	
	public static SendSmsResponse sendSms(SendSmsRequest request) {
        SendSmsResponse sendSmsResponse = null;
        try {
            IAcsClient acsClient = CodeMessgeConfig.getAcsClient();
            request.setSignName(CodeMessgeConfig.signName);
            request.setTemplateCode(CodeMessgeConfig.templateCode1);
            sendSmsResponse = acsClient.getAcsResponse(request);
        } catch (Exception e) {
            e.printStackTrace();
        }
        return sendSmsResponse;
    }
}
_Y_L
关注
  • 0
    点赞
  • 踩
  • 4
    收藏
    觉得还不错? 一键收藏
  • 5
    评论
基于登录注册用ajax实现手机验证码功能
MiSiTeLin的博客
02-11 1471
aa
javaweb手机短信验证
02-01
该文件中有做好的手机短信验证项目，有文档，jar包，内容齐全，主要使用ajax,servlet,jsp技术，代码注释齐全，已经测试，能够正常使用。
使用ajax实现发送验证码业务
锦瑟年华的博客
09-16 1874
这里实现用ajax发送手机验证码的业务和功能，代码如下：//点击获取验证码 document.getElementById("btnyzm").onclick=function(){ //如果在正在发送则不能发送 var t =this.innerHTML.indexOf('重'); if(t==0){ return;
jsp+servlet+ajax，登录验证码图片上传
12-22
图一：说明 登陆功能，前台可以判断验证码是否正确以及用户名密码是否为空,后台服务端判断账号密码是否匹配。图二：说明 注册功能，前台可以判断两次输入密码是否一致，是否已经存在该账号，后台进行数据库插入操作完成注册。图三，图四 说明： 主页显示DVD功能，可以进行分页显示DVD信息，借出，归还，修改DVD信息的操作， 可以进行多选删除。可以显示DVD的图片，用户在未登陆的情况下会直接跳转到登陆页面。图五 说明： 在主页点击相关DVD的修改链接，可以将DVD的信息绑定在修改页面以便于用户进行修改，其中DVD编号不允许修改。图六 说明：点击添加DVD可以进行添加DVD的操作，其中编号已经自增不允许变更，可以上传DVD的图片。 图七 说明：可以对DVD信息根据名称进行模糊查询，如果查询内容为空，则显示所有DVD信息，可以进行借出，归还，修改，批量删除操作。如上图所示。 图八 说明：点击 信息统计可以显示所有已借出和未借出的DVD数量，如上图所示。
jsp+servlet实现发送短信验证码(实现简单手机登录)
07-01
2. **发送请求**：使用jQuery的Ajax异步发送请求到服务器，请求包含手机号码。 3. **Servlet处理**：Servlet接收到请求后，调用短信服务提供商的API，生成并发送验证码。 4. **短信发送**：短信服务提供商将验证码...
用代理避免ajax跨域请求（手机验证码）
06-01
标题“用代理避免ajax跨域请求（手机验证码）”指出了解决这个问题的一种策略，即利用代理服务器来规避浏览器的同源策略限制。下面我们将深入探讨这个主题。 首先，我们了解什么是跨域请求。在Web开发中，由于...
Spring+ajax+servlet异步完成登录名是否存在
04-22
本文将深入探讨如何使用Spring、Ajax和Servlet实现登录名存在的异步检查，从而在用户输入时实时验证用户名是否已被占用，避免用户等待服务器返回完整的登录页面。我们首先会介绍相关技术的基本概念，然后逐步解析...
基于JSP+JavaBean+Servlet+Ajax+Mysql的验证码 增删查改完整例子
11-21
在IT领域，构建Web应用程序是常见的任务之一，而本示例提供了一个基于JSP、JavaBean、Servlet、Ajax以及Mysql的完整应用实例，主要涵盖了数据的增删查改（CRUD）操作，并且利用Ajax实现了异步的验证码验证功能。...
Servlet Layui 客户管理系统
06-26
在这种架构下，前后端通过API进行通信，前端通过Ajax异步请求获取数据，更新视图，而后端则提供RESTful API供前端调用。这种模式提高了开发效率，使前后端可以独立开发和测试，同时也方便了微服务架构的实现。 在...
ajax获取信息发送短信,javascript ajax获取信息功能代码
weixin_30935961的博客
08-05 237
Client端代码如下：Enter the setup then get the info:→ how many once：→ begin num ：→ end num ：功能可以改进，改进以后防止网络拥堵导致的获取信息失败而造成的不连续，可以改进成实现很多功能的工具，比如刷票...自己发挥，我只提供思路~...
JSP+Servlet+Ajax实现后台异步检验用户信息实例
wandering
08-12 734
下面介绍JSP前台表单内容通过Ajax异步提交到后台Servlet进行校验（校验方式多种，包括提取数据库信息，校验用户名是否重复等），异步在JSP表单页面显示校验结果信息的基本过程。 一、说明：        1.由于本文只限于介绍JSP+Servlet+Ajax运用的基本流程，重点不在于后台数据库的访问和校验内容，因此省略Servlet对数据库的访问。 二、基本流程：       1. JSP页...
这是一个简单的前台短信验证码功能 ajax实现异步处理 （发送和校验）
08-24 374
<script type="text/javascript"> var InterValObj; //timer变量，控制时间 var count = 60;//间隔函数，1秒执行 var curCount;//当前剩余秒数 function sendMessage() { curCount = count; // 设置button效果，开始计时 ...
Ajax验证码（JSP+SERVLET）
Everlasting丶幻的专栏
12-04 455
servlet代码： import java.awt.Color; import java.awt.Font; import java.awt.Graphics; import java.awt.image.BufferedImage; import java.io.IOException; import java.util.Random; import javax.imageio.Image
django项目中如何使用ajax完成短信验证码的发送
weixin_42289273的博客
01-16 321
1. ajax代码 $.ajax({ cache: false, type: 'post', dataType:'json', url:"/users/send_sms/", data:{ mobile:$inpRegMobile.val(), "captcha_1":$inpRegCaptcha.val(), "captcha_0":$('#id_captcha_0').val(), } 2. 手机号，图
利用ajax异步校验验证码
龙腾四海365的专栏
11-28 4451
利用ajax异步校验验证码 示例结果如图所示 具体步骤如下： step1: jsp页面及js脚本 form /js/my.js"> //检查用户名是否存在 function check_username(){ //step1,获得ajax对象 var xhr = getXhr(); var username
Servlet实现一个简单的登录[验证码]功能
ygn12的博客
05-31 1028
开发工具 主要用的开发工具为 MyEclipse（2014、2016均可）、Tomcat 6.0以上、浏览器等。 开发环境 开发环境为windows系统，已安装配置Java最新版开发环境。 主要功能与语言 登录验证码。 所采用JSP+Servlet+JavaBean传统方式，仅限于学习使用。 主要代码实现 ValidateServlet.java（实现的功能：随机生成验证码） ValidateSe...
ajax+servlet实现更换验证码
weixin_44883971的博客
09-03 234
实现效果 点击看不清，换一张图片，会换一张图片 实现原理： 继承HttpServlet使用CaptchaUtil.createCircleCaptcha()方法 注意： http://localhost:8080/jspday05/gc?i=1 这个i是可以变换的，没变一次，图片改变一次 html页面 <%@ page contentType="text/html;charset=UTF-8" language="java" %> <html> //下面这个是获取绝对路径的意思，用
ajax请求短信发送
fyclover的博客
07-10 454
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <!-- 必须引用 jquery --> <script src="jquery-3.4.1.min.js"></s...
Ajax获取表单值的异步Servlet传递策略
在探讨Ajax获取表单值向Servlet传递的设计方案时，首先了解一下背景。在Java Web开发中，MVC架构（如Struts、Struts2、Spring MVC和WebWork等）是主流框架，它们本质上都是对Servlet技术的抽象和封装，提供了一种...
评论 5
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值