欢迎来到六久阁织梦模板网!
用PbootCms的API接口制作Ajax无刷新留言

用PbootCms的API接口制作Ajax无刷新留言

浏览次数: 0

作者: 六久阁织梦模板网

信息来源: 未知

更新日期: 2022-04-03

文章简介

我们在制作模板的过程中,经常会使用到留言板等表单提交功能,常规的表单提交方式每次提交会有一个跳转,对访客不友好。有没有更好的UEO(用户体验)方案呢?有的,PbootCms有留言、表单的API接口,我们来做一个Ajax方式提交留言 。 实现过程 首先,写好表单

  • 正文开始
  • 热门文章

我们在制作模板的过程中,经常会使用到留言板等表单提交功能,常规的表单提交方式每次提交会有一个跳转,对访客不友好。有没有更好的UEO(用户体验)方案呢?有的,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];

}

请手动删除代码中的@符号,本站基于PbootCms搭建,加@符号防止解析

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;

}

效果展示

image.png

转载请注明: 织梦模板 » 用PbootCms的API接口制作Ajax无刷新留言

标签: PbootCMS
  • PbootCms关闭自动更新的方法二开必备
    阅读
    在使用PbootCms做网站的过程中,难免会遇到一些二次开发的内容。网站后台有在线更新的按钮。 如果做了二开,那么更新就需要慎重了。比较保险的做法是禁用掉在线更新。 操作方法 通常的做法是在 \apps\admin\view\default\system\home.html \apps\admin\view\...
  • PbootCms百度小程序和微信小程序API封装教程
    阅读
    下面是封装步骤(封装文件在文章最后提供下载,供大家参考)。 1、准备md5加密文件。 因为PbootCMS的签名参数signature是经过双层md5加密的,当然如果后台WebAPI没有开启强制认证的,这一步可以跳过。 2、封装一下API的请求方法。 //声明一个请求函数 functi...
  • PbootCms扩展控制器本地正常上传到服务器就出错的解决办法
    阅读
    PbootCms扩展标签定制个性化时间的文章定制了自己想要的时间格式,结果本地正常,上传到服务器环境后就不生效。 原因是PbootCms官方的一个小BUG,截至V2.0.9仍然存在。如果你也遇到,可以参考一下解决方案。 解决办法 如下图标记,路径前有一个点。 解决办法...
  • PbootCms的Tag标签的调用及使用说明
    阅读
    很多初学者在使用PbootCms的过程中都会遇到各种各样的问题,有很多问题其实真的是很简单,不过是没有耐心去仔细翻阅开发手册。只要多一份耐心仔细查阅都能找到答案。 我们来整理一些初学者常遇到的问题。今天讲一些TAG标签,初学者可以看看,大佬就请直接绕...
  • 用PbootCms的API接口制作Ajax无刷新留言
    阅读
    我们在制作模板的过程中,经常会使用到留言板等表单提交功能,常规的表单提交方式每次提交会有一个跳转,对访客不友好。有没有更好的UEO(用户体验)方案呢?有的,PbootCms有留言、表单的API接口,我们来做一个Ajax方式提交留言 。 实现过程 首先,写好表单...
  • PbootCms导航菜单标签调用小技巧
    阅读
    PbootCms官方群里每天都会有一些小白问一些很简单没啥技术含量的问题,导致大家都懒的教,技术讨论的质量越来越低。 这里我把一些小白常遇到的问题理一理,希望对新手有些帮助,当然,最好还是提升下自身的基础知识储备,早日走向大神之路。 关于导航菜单 {@...
  • PbootCms扩展个性化日期调用
    阅读
    PbootCms默认的日期标签可以使用style=Y-m-d形式定制日期格式。这不是本着把扩展标签玩出花样的目的来搞一搞事情。(当然也是给各位做一个学习参考) 我想要的效果是,发布时间可以显示: 刚刚 1小时前; 昨天 几点几分; 前天 几点几分; 年月日 几点几分;...
  • 如何清理PbootCMS程序中的冗余无效图片
    阅读
    PbootCms默认是没有图片管理器的,所以若是使用相同的图片,都需要每次重新上传。再加上误传的、更新的图片,项目目录里就会产生很多冗余图片,文件夹越来越大,备份越来越臃肿。 针对已经存在的站点我们开发了一个冗余文件处理功能。 先来上一波图: 有图有...
  • PbootCms在模板中对定制标签中的内容进行二次处理
    阅读
    在模板制作过程中,会遇到这样的需求: 1、模板中的文案样式不统一,客户需要自己能修改 2、客户有多个销售QQ需要在页面展示 可以解决问题的方案 使用PbootCms中的定制标签功能,不断的增加标签,将标签集成进模板中,达到可自行修改的目的。 方案缺点很明显...
  • PbootCms制作ajax无刷新加载列表内容
    阅读
    Ajax无刷新加载内容,看起来高大上一点,但是对SEO是不太友好的,所以在使用的时候应该有个取舍。 由于PbootCMS的Api接口的存在,在PbootCMS上实现Ajax加载还是比较方便的。 实现步骤 一、点击更多按钮加载内容 1、首先,添加一个按钮用来触发事件。 button...
收藏此文 打赏本站

如本文对您有帮助,就请六久阁织梦模板网抽根烟吧!

  • 支付宝打赏
    支付宝扫描打赏
    微信打赏
    微信扫描打赏
PbootCms百度小程序和微信小程序API封装教程
« 上一篇 2022年04月03日
PbootCms自定义分页制作自己常用的文章分页风格
下一篇 » 2022年04月03日

精彩评论

有问题在这里提问,阁主会为你解决!
  • 全部评论(0
    还没有评论,快来抢沙发吧!
推荐精品模板更多
营销型印刷包装打带类企业网站织梦模板(带手机端)
更新时间:2020-04-30

人已经看过了!

律师事务所网站织梦dede模板(中英双语自适应模板)
更新时间:2019-11-07

人已经看过了!

新闻博客军事新闻资讯头条网织梦模板(带手机端)
更新时间:2019-11-08

人已经看过了!

木质地板-家具橱柜织梦模板 带手机版
更新时间:2017-08-10

人已经看过了!

卧室家居家具类织梦模板(带手机端)
更新时间:2019-09-05

人已经看过了!

织梦模板素材源码下载站带会员中心带手机模板
更新时间:2019-09-05

人已经看过了!

高端品牌建筑装饰类响应式织梦模板
更新时间:2017-08-10

人已经看过了!

织梦简洁好看小说模板源码下载带手机端
更新时间:2019-12-15

人已经看过了!