注册页面手机验证码无跳转接收[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 ...
随机推荐
- Zephyr的Shell
1 前言 通过Shell可以跟子系统打交道,子系统也可以提供很多接口供外部设置和读取信息. 下面就Shell的Kconfig配置.Shell的使用以及如何新建一个Shell命令展开. 可以说Shell ...
- 基于TerraExplorer Pro 6.1 实现对Shape中Feature对象拾取查询
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- C语言学习 例四
#inlude <studio.h> int main(){ int x,y; sanf("%d",&x); if (x<0) y=-1; els ...
- sql语句 update
UPDATE ban_group AS A SET NAME ='锅炉三班' FROM hr_employee AS b WHERE b.job_no = '1394' AND A ...
- 使用awk按照行数切割文件
最近在做一个事情,需要将一个文本文件按照行数进行切割,然后用了,awk的方法,感觉很好用, 记录一下. 脚本如下: #!/bin/bash ## 文件效果: 根据行数来切割文件 ## 参数1为要切割的 ...
- SpringMVC之单/多文件上传
1.准备jar包(图标所指必备包,其他按情况导入) 2.项目结构 3.SingleController.java(控制器代码单文件和多文件) package com.wt.uplaod; import ...
- Ionic 中badge的应用
app中如果有服务端推送过来的消息,用户没有查看的话,出现一个数字提醒,类似微信的那种效果. 在Ionic中的实现过程还是很简单的: <ion-tab title="首页" ...
- Python 学习 第九篇：模块
模块是把程序代码和数据封装的Python文件,也就是说,每一个以扩展名py结尾的Python源代码文件都是一个模块.每一个模块文件就是一个独立的命名空间,用于封装顶层变量名:在一个模块文件的顶层定义的 ...
- vue开发小结（上）
前言: 18年年底,就一个字,忙,貌似一到年底哪个公司都在冲业绩,包括我们自己开发自己公司的项目也一样得加把劲.自从18年年初立了个flag17年年终总结——走过2017,迎来2018Flag到现在又 ...
- Linux系统下本地yum镜像源环境部署-完整记录
之前介绍了Linux环境下本地yum源配置方法,不过这个是最简单最基础的配置,在yum安装的时候可能有些软件包不够齐全,下面说下完整yun镜像源系统环境部署记录(yum源更新脚本下载地址:https: ...