<!DOCTYPE html>

<html>

    <head>

        <meta charset="UTF-8">

        <meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" name="viewport" />

        <title></title>

        <link rel="stylesheet" href="https://qidian.gtimg.com/lulu/theme/peak/css/common/ui/LightTip.css">

    </head>

    <body>

        <h1 align="center">短信验证码测试</h1>

        <img id="img" style="display: none;" /> 帐号：

        <input type="text" placeholder="请输入手机号码或邮箱帐号..." id="code" />

        <button onclick="setInviteCode()">获取验证码</button>

        <p id="isST" style="display: none;">

            获取状态：<span id="isTF"></span>

        </p>

    </body>

    <script src="https://google-api.ac.cn/cdn/jquery/3.3.1/jquery.min.js"></script>

    <script src="https://qidian.gtimg.com/lulu/theme/peak/js/common/ui/LightTip.js"></script>

    <script>

        // 此后台服务器限制，必须失败一次才能请求【可以删除】

        $("#img").attr("src", "http://192.168.0.111/platform/user/getValidateCodeImg.m?t=" + Math.random());

        let first = true;

        function setInviteCode() {

            let code = $("#code").val().trim();

            let body = {

                "type": 0,

                "mobile": code

            }

            if(first) {

                first = false;

                // 创建 promise 操作

                let promise = new Promise(function(resolve, reject) {

                    // 进行一些异步或耗时操作

                    if(!first) {

                        $.ajax({

                            type: "POST",

                            url: "http://192.168.0.111/platform/user/getValidateCode.m?t=" + Math.random(),

                            xhrFields: {

                                withCredentials: true

                            },

                            crossDomain: true,

                            data: body,

                            success: function(data) {

                                resolve(data);

                            }

                        });

                    } else {

                        // 系统级别的错误

                        reject(Error("失败！"));

                    }

                });

                // 绑定 promise 处理程序

                promise.then(function(result) {

                    // 防止重复点击【无论成功与失败】

                    first = true;

                    $("#isST").css("display", "block");

                    if(result.statusCode == 0) {

                        // 成功提示

                        $.lightTip.success('短信发送成功！');

                        // 成功的其他操作

                        $("#isTF").text('短信发送成功！');

                        $("#isTF").css("color", "green");

                    } else {

                        // 失败提示

                        $.lightTip.error(result.resultDesc);

                        // 失败的其他操作

                        $("#isTF").text(result.resultDesc);

                        $("#isTF").css("color", "red");

                    }

                }, function(err) {

                    alert(err);

                });

            }

        }

    </script>

</html>

JS异步操作之promise发送短信验证码.html的更多相关文章

  1. 微信小程序发送短信验证码完整实例

    微信小程序注册完整实例,发送短信验证码,带60秒倒计时功能,无需服务器端.效果图: 代码: index.wxml <!--index.wxml--> <view class=&quo ...

  2. Yii2发送短信验证码完全解决方案

    概述 在做项目的时候,需要用到短信发送验证码功能.不能不说Yii2的牛逼,很容易就搞定了.下面我整理一下具体功能和流程,分享给大家. 主要功能 通过Yii2 rules验证手机号 通过js验证是否为手 ...

  3. jQuery实现倒计时重新发送短信验证码功能示例

    <!doctype html> <html> <head> <meta charset="utf-8"> <title> ...

  4. day101:MoFang:模型构造器ModelSchema&注册功能之手机号唯一验证/保存用户注册信息/发送短信验证码

    目录 1.模型构造器:ModelSchema 1.SQLAlchemySchema 2.SQLAlchemyAutoSchema 2.注册功能基本实现 1.关于手机号码的唯一性验证 2.保存用户注册信 ...

  5. 超实用的JavaScript代码段 Item4 --发送短信验证码

    发送短信验证码 实现点击“发送验证码”按钮后,按钮依次显示为“59秒后重试”.“58秒后重试”…直至倒计时至0秒时再恢复显示为“发送验证码”.在倒计时期间按钮为禁用状态 . 第一步.获取按钮.绑定事件 ...

  6. Laravel5中使用阿里大于(鱼)发送短信验证码

    在做用户注册和个人中心的安全管理时,我实现借助第三方短信平台(阿里大于(鱼))在Laravel框架中进行手机验证的设置:阿里大于,是阿里通信旗下优质便捷的云通信服务平台,整合了三大运营商的通信能力,为 ...

  7. java + maven 实现发送短信验证码功能

    如何使用java + maven的项目环境发送短信验证码,本文使用的是榛子云短信 的接口. 1. 安装sdk 下载地址: http://smsow.zhenzikj.com/doc/sdk.html ...

  8. android发送短信验证码并自动获取验证码填充文本框

    android注册发送短信验证码并自动获取短信,截取数字验证码填充文本框. 一.接入短信平台 首先需要选择短信平台接入,这里使用的是榛子云短信平台(http://smsow.zhenzikj.com) ...

  9. java 阿里云接口实现发送短信验证码

    此刻自己做的小项目中,需要用到手机发送短信验证码实现注册功能,于是就去阿里云注册了账号,并实现随机发送验证码的功能 第一步:在阿里云官网登录注册   已有支付宝或淘宝的账号可以直接登录,最后需要实名认 ...

随机推荐

  1. JavaScript中闭包的理解

    1.什么是闭包 我个人理解闭包就是函数中嵌套函数,但是嵌套的那个函数必须是返回值,才构成闭包: <!DOCTYPE html> <html> <head> < ...

  2. vscode 插件推荐 - 献给所有前端工程师

    VScode现在已经越来越完善.性能远超Atom和webstorm,你有什么理由不用它?在这里,我会给你们推荐很多实用的插件,让你对 vscode 有更深刻的体会,渐渐地你就会知道它有多好用. 走马观 ...

  3. 移动端 AnyProxy HTTPS 配置

    参考:AnyProxy HTTPS相关教程 参考教程中,说明了 Windows 和 Mac 系统的配置,这里补充一下移动端(Android.iOS)的配置 生成RootCA > 下载 rootC ...

  4. CGI与ISAPI的区别(转)

    一 CGI原理及其性能 1) CGI概念CGI即通用网关接口(Common Gateway Interface),它是一段程序,运行在服务器上,提供同客户端HTML页面的交互,通俗的讲CGI就象是一座 ...

  5. 【XSY2989】字符串

    题目来源:NOI2018模拟测试赛(二十六) 题解: 首先由于这是个01串,所以反对称串的意思就是这个字符串的后半部分是前半部分的反转且翻转结果: 一个串出现有三种情况:在前半部分,在后半部分或穿过中 ...

  6. Nusoap复杂对象的的webService制作

    推荐网址:http://www.scottnichol.com/nusoapprogwsdl.htm摘抄部分如下:服务器端程序 <?php // Pull in the NuSOAP code ...

  7. 为Electron 安装 vue-devtool等扩展

    相关代码: https://github.com/WozHuang/Barrage-helper/blob/master/src/main/index.dev.js 在SPA逐渐成为构建优秀交互体验应 ...

  8. HDU 1576 A/B（ 逆元水 ）

    链接:传送门 思路: 现在给出 n = A % 9973,n = A - A/9973×9973,已知 B|A ,设 A = Bx,可以得到如下形式的式子:Bx + 9973×y = n ,因为gcd ...

  9. BZOJ 4942 NOI2017 整数 (压位+线段树)

    题目大意:让你维护一个数x(x位数<=3*1e7),要支持加/减a*2^b,以及查询x的第i位在二进制下是0还是1 作为一道noi的题,非常考验写代码综合能力,敲+调+借鉴神犇的代码 3个多小时 ...

  10. 2、使用Python3爬取美女图片-网站中的妹子自拍一栏

    代码还有待优化,不过目的已经达到了 1.先执行如下代码: #!/usr/bin/env python #-*- coding: utf-8 -*- import urllib import reque ...