PbootCMS

PbootCMS使用API接口制作Ajax无刷新留言

也想出现在这里?联系我们
创客云

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

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

也想出现在这里?联系我们
创客主机
  1. <div class="form">
  2.     <form action="" method="post">
  3.         <div class="unit-group input">
  4.             <div class="uk-grid">
  5.                 <div class="uk-width-1-2@m unit unit-left">
  6.                     <input id="Contacts" class="tm-transition" type="text" name="contacts" placeholder="您的称呼:">
  7.                 </div>
  8.                 <div class="uk-width-1-2@m unit unit-right">
  9.                     <input id="Home_contact_mail" class="tm-transition" type="text" name="home_contact_mail" placeholder="您的邮箱:">
  10.                 </div>
  11.             </div>
  12.         </div>
  13.         <div class="unit-group textarea">
  14.             <textarea id="Content" class="tm-transition" name="content" placeholder="请输入您想要跟我们说的话"></textarea>
  15.         </div>
  16.         <div class="uk-text-center unit-group button">
  17.             <button class="tm-transition" type="submit">联系我们</button>
  18.         </div>
  19.     </form>
  20. </div>

上面的代码其实不重要,关键就是表单的 action 留空,表单元素(input、tetxerea 等)的 name 和后台的表单字段对应。

其他的就根据自己页面样式需求来写即可。

接下来是重点:

1、首先 Ajax 提交需要在表单的按钮点击的时候触发。

  1. //.hengbok-home-contact button 就是表单中的button提交按钮
  2. jQuery('.hengbok-home-contact button').on('click', function(){
  3.  
  4.     //执行代码
  5.  
  6. });

注:以下的代码都写在上面的执行代码中。

2、定义一些需要用到的变量。

  1. var url  = '/api.php/cms/addmsg';    //Api的地址,我这里是留言接口,如果自定义表单的话填写表单接口
  2.  
  3. //定义data对象,默认包含appid,timestamp和signature
  4. var data = {
  5.         appid: '{*pboot:appid*}',
  6.         timestamp: '{*pboot:timestamp*}',
  7.         signature: '{*pboot:signature*}',
  8.     };
  9.  
  10. //定义一个空数组,用来储存表单提交过来的内容 
  11. var parm = new Array();
  12.  
  13. //将表单提交过来的内容储存到数组中去
  14. parm['contacts'] = jQuery('#Contacts').val();
  15. parm['home_contact_mail'] = jQuery('#Home_contact_mail').val();
  16. parm['content'] = jQuery('#Content').val();
  17.  
  18. //循环数组,将表单提交的内容添加到data对象中
  19. for (var i in parm) {
  20.     data[i] = parm[i];
  21. }

3、发起 Ajax 请求。

  1. //通过第二步,构建了Api所需的url和data,接下来就可以发起Ajax请求了
  2. jQuery.ajax({
  3.  
  4.     type: 'POST',        //提交的类型为 POST
  5.     url: url,            //url地址为上面定义的url变量
  6.     dataType: 'json',    //提交的数据类型为 json
  7.     data: data,          //提交的数据为上面构建的数据
  8.  
  9.     //提交成功
  10.     success: function( response, status ){
  11.         //Api返回的内容,例如“留言成功”,“留言失败”等
  12.         var Data = response.data;
  13.  
  14.         //如果成功,返回的code为1,失败返回0
  15.         if( response.code == 1 ){
  16.             //留言成功,向页面的DOM插入成功提示,更改样式。如果需要其他操作就自由发挥吧。
  17.             jQuery('.status .text').text('感谢您的留言,我们会尽快跟您联系!');
  18.             jQuery('.status').removeClass('error');
  19.             jQuery('.status').addClass('open success');
  20.  
  21.             return false;
  22.         } else {
  23.             //留言失败,比如某个字段没有填写,返回XXX字段为空这样的提示。
  24.             jQuery('.status .text').text( Data );
  25.             jQuery('.status').removeClass('success');
  26.             jQuery('.status').addClass('open error');
  27.  
  28.             return false;
  29.         }
  30.     },
  31.     //提交失败,将信息输出到控制台查看
  32.     error: function( xhr, status, error ){
  33.         console.log( error );
  34.     }
  35.  
  36. });
  37.  
  38. //Ajax提交后返回false,防止因为点击了表单的提交按钮造成的页面跳转。(实际上Ajax提交留言不一定需要form标签,不过写代码还是规范点比较好)
  39. return false;

4、完善 Ajax 留言。

  1. //因为Api没有验证码,并且PbootCMS默认也只是简单验证字段是否为空,所以在Ajax提交的时候稍微做一些简单的表单验证。
  2.  
  3. //验证表单字段是否为空,在“将表单提交过来的内容储存到数组”之前验证。
  4. if( parm['xxx'] == '' ){
  5.     jQuery('.status .text').text('请输入xxx。'); //如果为空的话,Api会默认返回一个提示语,不过在这里验证的话,可以自定义个性的提示语。
  6.  
  7.     //对DOM进行CSS操作
  8.     jQuery('.status').removeClass('success');
  9.     jQuery('.status').addClass('open error');
  10.  
  11.     //返回false,终止表单提交
  12.     return false;
  13. }
  14.  
  15. //验证邮箱格式,电话号码等。通过正则方式来验证访客输入的邮箱或者电话号码是否符合规范,返回提示。
  16. if ( parm['home_contact_mail'] != '' ) {
  17.     var reg = /^w+((-w+)|(.w+))*@[A-Za-z0-9]+((.|-)[A-Za-z0-9]+)*.[A-Za-z0-9]+$/;
  18.     if( !reg.test( parm['home_contact_mail'] ) ) {
  19.         jQuery('.status .text').text('您的邮箱格式不对,请检查。');
  20.         jQuery('.status').removeClass('success');
  21.         jQuery('.status').addClass('open error');
  22.  
  23.         return false;
  24.     }
  25. }
  26.  
  27. //验证留言内容长度
  28. var ConLength = 15;    //定义内容至少输入的字符数量
  29.  
  30. //对留言内容长度和至少输入的字符数量进行比较
  31. if( parm['content'].length < ConLength ){
  32.     var MoreLength = ConLength - parm['content'].length;    //计算当前内容长度和至少输入的字符数量的差
  33.     jQuery('.status .text').text('您想要说的就这么多吗?请再写 ' + MoreLength + ' 个字吧。');    //个性化提示访客还需要输入多少字符
  34.     jQuery('.status').removeClass('success');
  35.     jQuery('.status').addClass('open error');
  36.  
  37.     return false;
  38.  
  39. }
  40.  
  41. //验证两次留言的时间间隔,在时间间隔内不允许多次提交
  42. //(1)、首先在Ajax留言成功的时候获取时间
  43. var Time = Date.parse(new Date())/1000;
  44.  
  45. //(2)、将留言时间写入浏览器本地存储
  46. localStorage.setItem('home_contact_time', Time);
  47.  
  48. //(3)、在进行Ajax提交之前获取button点击时的时间,并于浏览器本地存储的时间进行比较
  49. var Interval    = 60;  //设置两次留言的时间间隔,单位:秒
  50. var LastTime    = localStorage.getItem('home_contact_time');  //获取上次留言时间
  51. var CurrentTime = Date.parse(new Date())/1000;  //获取当前时间
  52.  
  53. if( LastTime && ( CurrentTime - LastTime ) < Interval ){    //比较言时间
  54.     var NextTime = Interval - ( CurrentTime - LastTime );   //获取需要N秒后才可以留言
  55.     jQuery('.status .text').text('您的留言太频繁了,请您休息' + NextTime + '秒后再进行操作。');
  56.     jQuery('.status').removeClass('success');
  57.     jQuery('.status').addClass('open error');
  58.  
  59.     return false;
  60. }

大功告成,示例如下:
PbootCMS使用API接口制作Ajax无刷新留言PbootCMS使用API接口制作Ajax无刷新留言

资源下载此资源下载价格为5立即购买,VIP 免费

收藏
(0)

本文由 云模板 作者:PetitQ 发表,转载请注明来源!

也想出现在这里?联系我们
创客主机

发表评论

热销模板

Hub - 响应式可视化编辑企业官网WordPress汉化模板

Envato

本站承接 WordPress / PbootCMS / DedeCMS 等
系统建站、仿站、开发、定制等业务!

请扫码添加QQ好友后咨询!