91成人在线播放_欧美一区二区视频在线观看_91精品国产高清久久久久久_国产精品久久亚洲不卡4k岛国


待發(fā)短信
在線客服
產(chǎn)品支持 短信寶客服
合作渠道 渠道合作
服務(wù)咨詢

4001-021-502

工作時間

9:00-21:00

短信寶驗(yàn)證碼開發(fā)教程 – 5.前端篇
2015-06-19編輯人: 短信寶小編

這是這個系列的最后一篇了，主要介紹前端的數(shù)據(jù)處理。主要有幾個關(guān)鍵技術(shù)點(diǎn)：

1.當(dāng)頁面打開時，判斷上次短信發(fā)送請求的時間間隔有沒有到，如果沒有到，則前端顯示倒計(jì)時，并且禁用按鈕。由于數(shù)據(jù)來自于后端（在后端篇里面說到過），所以就算用戶重新刷新頁面也不能重置前端的倒計(jì)時時間。

2.防止用戶在發(fā)送短信驗(yàn)證碼時，由于點(diǎn)擊過快，一次發(fā)送2條或2條以上的情況。 原理：聲明一個標(biāo)記變量為true，只有標(biāo)記為true時，才能執(zhí)行ajax發(fā)送。當(dāng)點(diǎn)擊發(fā)送按鈕時，把標(biāo)記設(shè)置false，只有等ajax返回?cái)?shù)據(jù)后，才重置為true。

3.無論短信是否發(fā)送成功,都會重置圖形驗(yàn)證碼。做到每次發(fā)送短信，都需圖形驗(yàn)證碼的驗(yàn)證。

在sms/register.php中添加代碼：

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
<script src="js/jquery.js"></script>
<script>
    var time = 0; // 倒計(jì)時時間
    var res = null; // 倒計(jì)時資源，釋放時使用
    var sendNode = null; // 發(fā)送的按鈕節(jié)點(diǎn)
    var diffTime = "<?php echo $diff; ?>"; // 由php計(jì)算的時間差的結(jié)果。所以就算用戶刷新頁面，倒計(jì)時還是存在的。
 
    /**
     * 執(zhí)行倒計(jì)時的方法
     */
    function sendTime() {
        clearTimeout(res); // 先清空一下倒計(jì)時資源。
        time--; // 倒計(jì)時時間遞減。
 
        // 如果倒計(jì)時到達(dá)0時，則恢復(fù)按鈕原來的內(nèi)容
        if (time <= 0) {
            time = "獲取驗(yàn)證碼";
            sendNode.text(time);
            clearTimeout(res);
            time = 0;
            return;
        }
 
        // 倒計(jì)時的內(nèi)容寫到按鈕里面
        sendNode.text("剩余" + time + "秒");
        res = setTimeout("sendTime()", 1000);
    }
 
    /**
     * 調(diào)用處
     */
    $(function() {
        sendNode = $("#get_code"); // 獲取發(fā)送的節(jié)點(diǎn)
        var flg = true; // 防止ajax重復(fù)提交的標(biāo)記
 
        // 在頁面加載時，先判斷一下是否上次倒計(jì)時未完成，由php計(jì)算，防止頁面刷新，覆蓋掉倒計(jì)時。
        if ("" != diffTime) {
            time = parseInt(diffTime);
            sendTime();
        }
 
        /**
         * 點(diǎn)擊發(fā)送短信，觸發(fā)事件
         */
        sendNode.on("click", function() {
            // 如果當(dāng)前倒計(jì)時結(jié)束，則收集表單數(shù)據(jù)，并ajax提交到服務(wù)端
            if (0 == time) {
                var phoneNum = $("input[name='phone']").val();
                var code = $("input[name='vcode']").val();
                var data = {"code" : code, "phone" : phoneNum};
                var err = "";
 
                if (flg == true) {
                    flg = false;
                    // ajax提交請求
                    $.ajax({
                        "url" : "./tool/sendCode.php",
                        "type" : "post",
                        "data" : data,
                        "dataType" : "json",
                        "success" : function (msg) {
                            $(".errmsg").text("");
 
                            if (-1 == msg.flg) {
                                err = msg.err;
 
                                if ("code" == msg.type) {
                                    $("#code_err").text(err);
                                } else if ("phone" == msg.type) {
                                    $("#phone_err").text(err);
                                } else {
                                    alert("短信發(fā)送失敗，原因：" + err);
                                }
                            } else {
                                time = 60;
                                sendTime();
                                alert("發(fā)送驗(yàn)證碼成功！");
                            }
 
                                // 刷新圖形驗(yàn)證碼
                            $("#code_img").click();
                            flg = true;
                        }
                    });
                }
                return false;
            }
        });
    });
</script>

好了，我們來走一遍注冊的流程： 1.填好注冊信息后，發(fā)送短信驗(yàn)證碼，并成功接收到。

2.填寫好接收到的短信驗(yàn)證碼，完成注冊。跳轉(zhuǎn)到sms/login.php

這里寫圖片描述

 

整個短信驗(yàn)證碼開發(fā)教程全部完畢。我已經(jīng)提供了源碼下載。在這里我要特別感謝一下短信寶官網(wǎng)，他們公司本著幫助更多用戶的原則, 讓我把代碼上傳到他們的服務(wù)器上。如果還有什么疑問，可以給我留言，或者找短信寶的在線客服人員。

開源插件

最新更新

電商類

CMS類

微信類

文章標(biāo)簽