整理一下从大二开始写的东东
后台源码链接:点我自取
到网建申请一个帐号,好像可以免费用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);}}
效果如下: