注册页面手机验证码无跳转接收[html+js+ajax+php]
【学习笔记】
来源：注册时需要使用短信验证码，但是注册的时候，点击接收验证码时，会产生跳转（尼玛，这不是我想要的啊！o(╥﹏╥)o）
查询资料和看书之后，知道使用js+ajax可以实现，就从网上找了一些博客的资料来看，最后写出了可以实现需求的代码。
主要参考方法：https://blog.csdn.net/isabellazheng1991/article/details/53543925
https://q.cnblogs.com/q/45695/
【解决方法】
1个html页面,2个php页面,一个用于发送验证码一个用于验证,分开一是便于理解,二是防止点击注册时造成验证码反复产生,实际中写两个方法即可
短信接入平台为容联云
1.register.html
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html">
<meta charset="utf-16">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<title>手机验证</title>
<link rel="stylesheet" type="text/css" href="register.css">
<script src="./jquery.min.js"></script>
<style type="text/css">
body{
font-family:arial;
font-style:normal;
font-weight:normal;
font-size:16px;
} #table1 td:nth-of-type(3) input{
width:250px;
height:35px;
} #table1 td:nth-of-type(4){
font-size:12px;
color:red;
} #table2{
border:0;
width:300px;} button{
width:120px;
height:40px;
color:white;
background-color:rgb(2, 114, 188);
border-radius:10%; } </style>
<script>
function SendMsm(){
//单独处理发送短信的验证
s=document.getElementById("code_td");
var phone=document.getElementById("phone").value;
function vertiCodeSend(){
$.ajax({
url:"sendMes.php", //发送验证码的php页面
data:{"phone":phone},//传入后台
type:"POST",//类型
});
}
if(phone==""){s.innerHTML="请先输入手机号码";}
else{vertiCodeSend();s.innerHTML="";}
} </script>
</head>
<body> <div>
<form method="post" action="checkCode.php">
<table id="table1">
<tbody>
<tr>
<td><label for="phone">手机号码：</label></td>
<td></td>
<td>
<input id="phone" type="text" name="phone" maxlength="11"></td>
</tr>
<tr>
<td><label>手机验证码</label></td>
<td></td>
<td>
<input type="text" name="userCode" style="width:150px;" >
<input type="button" style="width:100px;font-size:14px;" value="获取验证码" onclick="SendMsm()">
</td>
<td id="code_td"></td>
</tr>
</tbody>
</table>
<table id="table2">
<tbody>
<tr>
<th><button type="submit" name="submit" value="注册">注册</button></th>
<th><button type="reset">重置</button></th>
</tr>
</tbody>
</table>
</form>
</div> </body>
</html>
2.sendMes.php
<?php session_start(); // 产生4位随机数
$str = rand(1000, 9999); // 新建变量接收
$authCode=$str; // 删除上次的缓存
unset( $_SESSION['authCodeS']); //给session中的authCodeS变量赋值
$_SESSION['authCodeS']=$authCode; //主帐号
$accountSid = 'xxxx'; //主帐号Token
$accountToken= 'xxxx'; //应用Id
$appId='xxxx'; //请求地址，格式如下，不需要写https://
$serverIP='app.cloopen.com'; //请求端口
$serverPort='8883'; //REST版本号
$softVersion='2013-12-26'; // 加载SDK
include './CCPRestSDK.php'; function sendTemplateSMS($to,$datas,$tempId=1)
{
// 初始化REST SDK
global $accountSid,$accountToken,$appId,$serverIP,$serverPort,$softVersion;
$rest = new REST($serverIP,$serverPort,$softVersion);
$rest->setAccount($accountSid,$accountToken);
$rest->setAppId($appId);
// 发送模板短信
$result = $rest->sendTemplateSMS($to,$datas,$tempId);
} sendTemplateSMS($_POST[phone],array($authCode,40)); ?>
3.checkCode.php
<?php
session_start(); // 验证
if($_SESSION['authCodeS']==$_POST['userCode']){
echo '注册成功(づ￣3￣)づ╭❤～';
echo '<meta http-equiv="refresh" content="2;url=register.html">';die;
}
else{
echo '注册失败o(╥﹏╥)o';
echo '<meta http-equiv="refresh" content="2;url=register.html">';die;
} ?>
至于限制用户点击后睡眠一段时间，可以自己修改添加
注册页面手机验证码无跳转接收[html+js+ajax+php]的更多相关文章
- 爬虫笔记之w3cschool注册页面滑块验证码破解（巨简单滑块位置识别，非鼠标模拟轨迹）
一.背景介绍 最开始接触验证码破解的时候就是破解的w3cschool的使用手机号找回密码页面的验证码,详见:验证码识别之w3cschool字符图片验证码(easy级别),这次破解一下他们注册页面的滑块 ...
- flask+阿里云短信服务实现注册发送手机验证码
效果图: 该效果主要讲解实现通过调用阿里云的SDK实现发送注册验证码短信(阿里云短信付费使用) 购买阿里云短信服务 购买链接:https://www.aliyun.com/product/sms 1. ...
- JavaWeb网上图书商城完整项目--26.注册页面之验证码换一张实现
我们现在要实现点击换一张的时候实现验证码的修改 我们首先在html添加函数点击事件: <%@ page language="java" contentType="t ...
- Android--普通注册页面实现（无功能）
reg.xml <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" xmln ...
- from表单实现无跳转上传文件，接收页面后台数据。
本文基于我刚写的http://www.cnblogs.com/iwang5566/p/6287529.html进行了简单的扩展,实现页面无跳转表单数据提交,并接收后台返回的数据. 下载好,上一篇文章d ...
- from表单实现无跳转上传文件，接收页面后台数据
实现无跳转发送表单数据.文件,并能接收后台返回的数据. 主要技术要点: 1.form表单添加target属性,指定一个iframme的name:form表单提交后在iframe内嵌窗口接受响应,主页面 ...
- Web项目中手机注册短信验证码实现的全流程及代码
最近在做只能净化器的后台用户管理系统,需要使用手机号进行注册,找了许久才大致了解了手机验证码实现流程,今天在此和大家分享一下. 我们使用的是榛子云短信平台, 官网地址:http://smsow.zhe ...
- Android笔记-4-实现登陆页面并跳转和简单的注册页面
实现登陆页面并跳转和简单的注册页面 首先我们来看看布局的xml代码 login.xml <span style="font-family:Arial;font-size:18px; ...
- ASP.NET ashx实现无刷新页面生成验证码
现在大部分网站登陆时都会要求输入验证码,在网上也看了一些范例,现在总结一下如何实现无刷新页面生成验证码. 效果图: 实现方式: 前台: <div> <span>Identify ...
随机推荐
- 人生苦短之HTTP协议及Requests库的方法
requests库的主要方法:requests.request()构造一个请求 requests.get()获取HTML网页的主要方法,对应于HTTP的GET requests.head( ...
- Luogu2336 SCOI2012 喵星球上的点名 SA、莫队
传送门 一道很套路的题目 先将所有串拼在一起,两个不同的串之间放一个没有出现在任何串中的字符做分隔,然后SA 那么对于所有点名串能够点到的名字串在SA中对应一段区间 把这些区间拿出来然后莫队统计每一个 ...
- mysql 添加字段，未响应
ddl是要请求锁整个表的,肯定是这个表上有DML事务了,也就是有其它会话在删除.修改.插入这个表并且未提交
- LiveCharts文档-3开始-5序列Series
原文:LiveCharts文档-3开始-5序列Series LiveCharts文档-3开始-5序列Series Strokes和Fills 笔触和填充 所有的Series都有笔触和填充属来处理颜色, ...
- Docker(五)：Docker 三剑客之 Docker Machine
上篇文章Docker(四):Docker 三剑客之 Docker Compose介绍了 Docker Compose,这篇文章我们来了解 Docker Machine . Docker Machine ...
- Asp.Net Core基于Cookie实现同域单点登录(SSO)
在同一个域名下有很多子系统 如:a.giant.com b.giant.com c.giant.com等 但是这些系统都是giant.com这个子域. 这样的情况就可以在不引用其它框架的情况下, ...
- 懒人小工具：T4生成实体类Model,Insert,Select,Delete以及导出Excel的方法
由于最近公司在用webform开发ERP,用到大量重复机械的代码,之前写了篇文章,懒人小工具:自动生成Model,Insert,Select,Delete以及导出Excel的方法,但是有人觉得这种方法 ...
- Centos下SFTP双机高可用环境部署记录
SFTP(SSH File Transfer Protocol),安全文件传送协议.有时也被称作 Secure File Transfer Protocol 或 SFTP.它和SCP的区别是它允许用户 ...
- linux及安全第四周总结
学习内容:使用库函数API和C代码中嵌入汇编代码两种方式使用同一个系统调用 一.用户态.内核态 权限分级——为了系统本身更稳定,使系统不宜崩溃.(并不是所有程序员缩写的代码都很健壮!!) x86 CP ...
- StringBuffer的append方法比“+”高效
在字符串的连接过程中StringBuffer的效率要比String高: string操作代码: String str = new String("welcome to "); st ...