PbootCMS使用技巧教程(三) - Ajax提交留言表單
PbootCMS使用技巧教程(三) - 使用Ajax提交留言或者自定義表單。
DistantMemory
DistantMemory

在制作模板Timoo-006的時候,設計稿首頁有個留言表單,一開始用正常的表單提交方式,但是每次提交會有一個跳轉,對訪客不友好。

最后還是決定使用PbootCMS的Api進行Ajax方式提交留言 。


首先,寫好表單的HTML代碼。

<div class="form">
    <form action="" method="post">
        <div class="unit-group input">
            <div class="uk-grid">
                <div class="uk-width-1-2@m unit unit-left">
                    <input id="Contacts" class="tm-transition" type="text" name="contacts" placeholder="您的稱呼:">
                </div>
                <div class="uk-width-1-2@m unit unit-right">
                    <input id="Home_contact_mail" class="tm-transition" type="text" name="home_contact_mail" placeholder="您的郵箱:">
                </div>
            </div>
        </div>
        <div class="unit-group textarea">
            <textarea id="Content" class="tm-transition" name="content" placeholder="請輸入您想要跟我們說的話"></textarea>
        </div>
        <div class="uk-text-center unit-group button">
            <button class="tm-transition" type="submit">聯系我們</button>
        </div>
    </form>
</div>

上面的代碼其實不重要,關鍵就是表單的action留空,表單元素(input、tetxerea等)的name和后臺的表單字段對應。

其他的就根據自己頁面樣式需求來寫即可。


接下來是重點:


1、首先Ajax提交需要在表單的按鈕點擊的時候觸發。

//.hengbok-home-contact button 就是表單中的button提交按鈕
jQuery('.hengbok-home-contact button').on('click', function(){

    //執行代碼

});


注:以下的代碼都寫在上面的執行代碼中。

2、定義一些需要用到的變量。

var url  = '/api.php/cms/addmsg';    //Api的地址,我這里是留言接口,如果自定義表單的話填寫表單接口

//定義data對象,默認包含appid,timestamp和signature
var data = {
        appid: '{*pboot:appid*}',
        timestamp: '{*pboot:timestamp*}',
        signature: '{*pboot:signature*}',
    };

//定義一個空數組,用來儲存表單提交過來的內容 
var parm = new Array();

//將表單提交過來的內容儲存到數組中去
parm['contacts'] = jQuery('#Contacts').val();
parm['home_contact_mail'] = jQuery('#Home_contact_mail').val();
parm['content'] = jQuery('#Content').val();

//循環數組,將表單提交的內容添加到data對象中
for (var i in parm) {
    data[i] = parm[i];
}


3、發起Ajax請求。

//通過第二步,構建了Api所需的url和data,接下來就可以發起Ajax請求了
jQuery.ajax({
    
    type: 'POST',        //提交的類型為 POST
    url: url,            //url地址為上面定義的url變量
    dataType: 'json',    //提交的數據類型為 json
    data: data,          //提交的數據為上面構建的數據
    
    //提交成功
    success: function( response, status ){
        //Api返回的內容,例如“留言成功”,“留言失敗”等
        var Data = response.data;
        
        //如果成功,返回的code為1,失敗返回0
        if( response.code == 1 ){
            //留言成功,向頁面的DOM插入成功提示,更改樣式。如果需要其他操作就自由發揮吧。
            jQuery('.status .text').text('感謝您的留言,我們會盡快跟您聯系!');
            jQuery('.status').removeClass('error');
            jQuery('.status').addClass('open success');
            
            return false;
        } else {
            //留言失敗,比如某個字段沒有填寫,返回XXX字段為空這樣的提示。
            jQuery('.status .text').text( Data );
            jQuery('.status').removeClass('success');
            jQuery('.status').addClass('open error');
            
            return false;
        }
    },
    //提交失敗,將信息輸出到控制臺查看
    error: function( xhr, status, error ){
        console.log( error );
    }

});

//Ajax提交后返回false,防止因為點擊了表單的提交按鈕造成的頁面跳轉。(實際上Ajax提交留言不一定需要form標簽,不過寫代碼還是規范點比較好)
return false;


4、完善Ajax留言。

//因為Api沒有驗證碼,并且PbootCMS默認也只是簡單驗證字段是否為空,所以在Ajax提交的時候稍微做一些簡單的表單驗證。

//驗證表單字段是否為空,在“將表單提交過來的內容儲存到數組”之前驗證。
if( parm['xxx'] == '' ){
    jQuery('.status .text').text('請輸入xxx。'); //如果為空的話,Api會默認返回一個提示語,不過在這里驗證的話,可以自定義個性的提示語。
    
    //對DOM進行CSS操作
    jQuery('.status').removeClass('success');
    jQuery('.status').addClass('open error');
    
    //返回false,終止表單提交
    return false;
}

//驗證郵箱格式,電話號碼等。通過正則方式來驗證訪客輸入的郵箱或者電話號碼是否符合規范,返回提示。
if ( parm['home_contact_mail'] != '' ) {
    var reg = /^w+((-w+)|(.w+))*@[A-Za-z0-9]+((.|-)[A-Za-z0-9]+)*.[A-Za-z0-9]+$/;
    if( !reg.test( parm['home_contact_mail'] ) ) {
        jQuery('.status .text').text('您的郵箱格式不對,請檢查。');
        jQuery('.status').removeClass('success');
        jQuery('.status').addClass('open error');

        return false;
    }
}

//驗證留言內容長度
var ConLength = 15;    //定義內容至少輸入的字符數量

//對留言內容長度和至少輸入的字符數量進行比較
if( parm['content'].length < ConLength ){
    var MoreLength = ConLength - parm['content'].length;    //計算當前內容長度和至少輸入的字符數量的差
    jQuery('.status .text').text('您想要說的就這么多嗎?請再寫 ' + MoreLength + ' 個字吧。');    //個性化提示訪客還需要輸入多少字符
    jQuery('.status').removeClass('success');
    jQuery('.status').addClass('open error');
    
    return false;

}

//驗證兩次留言的時間間隔,在時間間隔內不允許多次提交
//(1)、首先在Ajax留言成功的時候獲取時間
var Time = Date.parse(new Date())/1000;

//(2)、將留言時間寫入瀏覽器本地存儲
localStorage.setItem('home_contact_time', Time);

//(3)、在進行Ajax提交之前獲取button點擊時的時間,并于瀏覽器本地存儲的時間進行比較
var Interval    = 60;  //設置兩次留言的時間間隔,單位:秒
var LastTime    = localStorage.getItem('home_contact_time');  //獲取上次留言時間
var CurrentTime = Date.parse(new Date())/1000;  //獲取當前時間

if( LastTime && ( CurrentTime - LastTime ) < Interval ){    //比較言時間
    var NextTime = Interval - ( CurrentTime - LastTime );   //獲取需要N秒后才可以留言
    jQuery('.status .text').text('您的留言太頻繁了,請您休息' + NextTime + '秒后再進行操作。');
    jQuery('.status').removeClass('success');
    jQuery('.status').addClass('open error');

    return false;
}


大功告成,示例如下:

001.jpg


002.jpg


003.jpg


004.jpg


005.jpg

甘肃快3,甘肃快三开奖结果,甘肃快三走势图