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

最新推荐文章于 2022-03-17 14:08:47 发布

_Y_L

最新推荐文章于 2022-03-17 14:08:47 发布

阅读量826

点赞数

本文链接：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异步servlet请求，并获取手机短信验证码

ajax异步servlet请求并获取手机短信验证码通过jquery、ajax传递数据，异步请求servlet；并通过阿里云短信服务api获取手机短信验证码前端html&lt;html&gt;&lt;head&gt; &lt;title&gt;ajax异步servlet获取短信验证码&lt;/title&gt; &lt;meta http-equiv="Content...
复制链接

扫一扫