【学习笔记】

　　来源：注册时需要使用短信验证码，但是注册的时候，点击接收验证码时，会产生跳转（尼玛，这不是我想要的啊！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]的更多相关文章

  1. 爬虫笔记之w3cschool注册页面滑块验证码破解（巨简单滑块位置识别，非鼠标模拟轨迹）

    一.背景介绍 最开始接触验证码破解的时候就是破解的w3cschool的使用手机号找回密码页面的验证码,详见:验证码识别之w3cschool字符图片验证码(easy级别),这次破解一下他们注册页面的滑块 ...

  2. flask+阿里云短信服务实现注册发送手机验证码

    效果图: 该效果主要讲解实现通过调用阿里云的SDK实现发送注册验证码短信(阿里云短信付费使用) 购买阿里云短信服务 购买链接:https://www.aliyun.com/product/sms 1. ...

  3. JavaWeb网上图书商城完整项目--26.注册页面之验证码换一张实现

    我们现在要实现点击换一张的时候实现验证码的修改 我们首先在html添加函数点击事件: <%@ page language="java" contentType="t ...

  4. Android--普通注册页面实现（无功能）

    reg.xml <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" xmln ...

  5. from表单实现无跳转上传文件，接收页面后台数据。

    本文基于我刚写的http://www.cnblogs.com/iwang5566/p/6287529.html进行了简单的扩展,实现页面无跳转表单数据提交,并接收后台返回的数据. 下载好,上一篇文章d ...

  6. from表单实现无跳转上传文件，接收页面后台数据

    实现无跳转发送表单数据.文件,并能接收后台返回的数据. 主要技术要点: 1.form表单添加target属性,指定一个iframme的name:form表单提交后在iframe内嵌窗口接受响应,主页面 ...

  7. Web项目中手机注册短信验证码实现的全流程及代码

    最近在做只能净化器的后台用户管理系统,需要使用手机号进行注册,找了许久才大致了解了手机验证码实现流程,今天在此和大家分享一下. 我们使用的是榛子云短信平台, 官网地址:http://smsow.zhe ...

  8. Android笔记-4-实现登陆页面并跳转和简单的注册页面

    实现登陆页面并跳转和简单的注册页面   首先我们来看看布局的xml代码 login.xml <span style="font-family:Arial;font-size:18px; ...

  9. ASP.NET ashx实现无刷新页面生成验证码

    现在大部分网站登陆时都会要求输入验证码,在网上也看了一些范例,现在总结一下如何实现无刷新页面生成验证码. 效果图: 实现方式: 前台: <div> <span>Identify ...

随机推荐

  1. harbor Configuring Harbor with HTTPS Access

    首先,下载fq (fanqiang) harbor-offline-installer-v1.2.0-rc5.tgz tar xvf harbor-offline-installer-<vers ...

  2. try--catch--finally中return返回值执行的顺序

    1.try块中没有抛出异常,try.catch和finally块中都有return语句 public static int NoException(){ int i=10; try{ System.o ...

  3. 基于uFUN开发板的心率计（三）Qt上位机的实现

    前言 上两周利用周末的时间,分别写了基于uFUN开发板的心率计(一)DMA方式获取传感器数据和基于uFUN开发板的心率计(二)动态阈值算法获取心率值,介绍了AD采集传感器数据和数据的滤波处理获取心率值 ...

  4. 在Windows7上如何找到Cookie

    摘要 出于兴趣爱好,前一阵子做了一个网页,网页中需要用到Cookie,但是,根据书上的说明,并没有找打教材中所说的Cookie的位置,本文就主要介绍在计算机(Win7)中Cookie的存放位置,同样适 ...

  5. 【知识整理】这可能是最好的RxJava 2.x 入门教程（一）

    一.前言 这可能是最好的RxJava 2.x入门教程系列专栏 文章链接: 这可能是最好的RxJava 2.x 入门教程(完结版)[强力推荐] 这可能是最好的RxJava 2.x 入门教程(一) 这可能 ...

  6. C#_委托与事件

    委托: 把方法当作参数进行传递 public delegate void AddDelegate(string name); public class Ad{ //addDelegate就是委托的一个 ...

  7. Ionic 中控件点击延迟的处理

    原文发表于我的技术博客 本文分享了在 Ionic 中如何处理控件点击延迟的问题. 原文发表于我的技术博客 1. 问题描述 在 Ionic 中,当在 iOS 环境下运行元素的点击事件时,你会发现点击响应 ...

  8. hadoop-mapreduce-(1)-统计单词数量

    编写map程序 package com.cvicse.ump.hadoop.mapreduce.map; import java.io.IOException; import org.apache.h ...

  9. C_数据结构_走迷宫

    #include <stdio.h> #include <conio.h> #include <windows.h> #include <time.h> ...

  10. javaScript——DOM1级，DOM2级，DOM3级

    DOM0,DOM2,DOM3事件处理方式区别:http://www.qdfuns.com/notes/11861/e21736a0b15bceca0dc7f76d77c2fb5a.html JS中do ...