最新公告
  • 欢迎您光临尘梦网,我们提供建站技术教学,帮助用户实现从技能提升到技能应用的能力闭环。立即加入我们
  • PbootCMS使用技巧教程(三) – Ajax提交留言表单

    在制作模板Timoo-006的时候,设计稿首页有个留言表单,一开始用正常的表单提交方式,但是每次提交会有一个跳转,对访客不友好。

    最后还是决定使用PbootCMS的Api进行Ajax方式提交留言 。

    首先,写好表单的HTML代码。

    <div class="form">
        <form action="" method="post">
            <div class="unit-group input">
                <div class="uk-grid">
                    <div class="[email protected]">
                        <input id="Contacts" class="tm-transition" type="text" name="contacts" placeholder="您的称呼:">
                    </div>
                    <div class="[email protected]">
                        <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

    尘梦网(itwork.ren)涉及PHP、Web前端等技术教学,涵盖了jquery插件,css3特效,网站模板,办公资源等需求场景,帮助用户实现从技能提升到技能应用的能力闭环。
    尘梦网 » PbootCMS使用技巧教程(三) – Ajax提交留言表单

    常见问题FAQ

    尘梦网是什么?
    尘梦网(itwork.ren)是互联网综合学习平台。尘梦网(itwork.ren)涉及PHP、Web前端等技术教学,涵盖了jquery插件,css3特效,网站模板,办公资源等需求场景,帮助用户实现从技能提升到技能应用的能力闭环。
    本站课程是否为1对1教学?
    本站为录播课程,可直接寻找对应课程观看,不定时会有直播课
    提示下载完但解压或打开不了?
    最常见的情况是下载不完整: 可对比下载完压缩包的与网盘上的容量,若小于网盘提示的容量则是这个原因。这是浏览器下载的bug,建议用百度网盘软件或迅雷下载。若排除这种情况,可在对应资源底部留言,或 联络我们.。
    免费下载或者会员专享资源能否直接商用?
    本站所有资源版权均属于原作者所有,这里所提供部分资源均只能用于参考学习用,请勿直接商用。若由于商用引起版权纠纷,一切责任均由使用者承担。

    发表评论

    • 24350会员总数(位)
    • 367资源总数(个)
    • 0本周发布(个)
    • 0 今日发布(个)
    • 238稳定运行(天)

    提供最优质的资源集合

    立即查看 了解详情