SSM发送手机验证码——以网建SMS为例

article/2025/8/27 19:41:23

整理一下从大二开始写的东东

后台源码链接：点我自取

到网建申请一个帐号，好像可以免费用10条短信

在这里插入图片描述

设置用户名、密钥，在发送的时候需要携带该信息

前端代码简化后如下，提交表单我用的是ajax，如果直接提交表单记得name属性值要和后台的@RequestParam(“tel”)中的tel属性值一样，后台代码顶部链接自取。

<form role='form' class='login' id='getPswForm'>			 <input type='text' name='tel' placeholder='输入手机号码...'class='form-control' id='getTel' /><input type='text' name='psw' placeholder='输入新密码...'class='form-control' id='get-psw' /><input type='text' name='code' placeholder='输入验证码...'class='form-control' id='code' style='width: 340px;'/><button id='send' class='btn btn-primary mybtn'>点击发送</button></form>//发送验证码$("#send").click(function(){var tel = $("#getTel").val();if(checkTel("#get-chk-tel",tel)){//alert($("#getTel").val());$.ajax({//这里的url和type和后台的 @RequestMapping(value="send",method=RequestMethod.POST)保持一致type:"POST",data:{tel:$("#getTel").val()},async:false,url:"send",success:function(result){// alert(result);console.log(typeof(result));if(result=="200"){alert("发送成功，注意查收");$("#get-chk-tel").html("");checkCode(60);}else if(result=="2"){$("#get-chk-tel").html("该用户不存在");checkCode(2);}},error:function(xhr,result){alert(result);}});}else{alert("请填写好手机号码");}});function checkCode(time){if(time == 0){$('#send').removeAttr("disabled");//这个表示，从xx中移除yy属性，$(xx).remove()，移除xx元素$('#send').html("重新发送");}else{time--;$('#send').attr("disabled",true);$('#send').html("倒计时"+time+"s");setTimeout(function(){checkCode(time);},1000);}}

效果如下：

在这里插入图片描述