注册页面手机验证码无跳转接收[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 ...
随机推荐
- lesson3:小程序
问题: 一·设计思想 创建一个静态变量,利用构造函数在每次创建对象时运行的机制,计算创建对象个数. 二·程序流程图 三·程序源代码 public class Test9{ public static ...
- PHP_EOL换行 与 base64编码
base64编码包括64个字符:10个数字(0-9),26*2个字母(a-zA-Z),+,/ 其中还有一个第65个字符=作为后缀,没有实际作用. 来一段代码说明个问题: <?php $str = ...
- Luogu2164 SHOI2007 交通网络 期望、BFS、拓扑排序
传送门 题目还算不难吧 首先我们枚举点$i$,将其他所有点到这个点的最短路求出来 然后我们在这一次建出的最短路$DAG$的反图上进行拓扑排序.假设我们算到了点$j$,点$j$的人流量为$t_j$,点$ ...
- BZOJ3714 PA2014 Kuglarz 最小生成树
题目传送门 题意:有$N$个盒子,每个盒子中有$0$或$1$个球.现在你可以花费$c_{i,j}$的代价获得$i$到$j$的盒子中球的总数的奇偶性,求最少需要多少代价才能知道哪些盒子中有球.$N \l ...
- [JSOI2016]病毒感染[dp]
题意 有 \(n\) 个村庄按标号排列,每个村庄有一个死亡速度 \(a_i\) 表示每天死 \(a_i\) 人(除非你治好这个村庄). 你从 1 号村庄出发,每天可以选择向相邻的村庄进发或者治愈 ...
- 开启mac上印象笔记的代码块
Mac 印象笔记左上角菜单栏:偏好设置-->软件更新-->开启代码块 (Preferences -> Software Update -> Enable code block) ...
- Mvc_ActionResult返回值
//ViewResult 表示HTML的页面内容 //EmptyResult 表示空白的页面内容 //RedirectResult 表示定位到另外一个URL //JsonResult 表示可以运用到A ...
- CSS 表格实例
CSS 表格实例CSS 表格属性可以帮助您极大地改善表格的外观.CSS Table 属性属性 描述border-collapse 设置是否把表格边框合并为单一的边框.border-spacing 设置 ...
- Linux内核分析作业第七周
一. 预处理.编译.链接 gcc hello.c -o hello. gcc编译源代码生成最终可执行的二进制程序,GCC后台隐含执行了四个阶段步骤. 预处理 → 编译 → 汇编 → 链接 预处理:编译 ...
- ASP.NET Forms验证
/// <summary> /// 执行用户登录操作 /// </summary> /// <param name="config">授权配置信 ...