phpcms利用ajax实现留言功能,提升用户体验

最近帮客户做网站的时候,基本都有遇到需要输入验证码留言的功能需求,如果直接submit提交表单,PC端还好,如果是手机端,特别是页面比较长,留言表在页面最底部的情况,如果用户提交信息错误然后返回提示之后,页面数据会清空,然后直接回到页面的顶端,这样非常影响用户体验

特别是对于好多客户做好网站,然后拿去做付费推广的情况,如果是这样做的留言表,会很影响访客留言的积极性,从而造成隐形经济损失,如果改成ajax提交的话,就能很好的解决这个问题,数据可以保留,信息提交错误的时候,返回提示信息,页面不会再直接跳回到顶部初始位置。

这里做一个记录,方便后面开发网站的时候,直接可以快速调用,节省开发时间,感兴趣的朋友可以做一定的参考

1、客户端ajax常规写法

    $(function(){
       $('.form_smt').click(function(e){
  
       /* //复选框值的获取
       moreinfo[0] = "-99";
       $.each($('.form-moreinfo input:checkbox'),function(){
           if(this.checked){
             moreinfo[i] = $(this).val();
             i++;
           }
       });*/
  
  
         let obj={
           'type':$('select[name=type]').val(),
           'name':$('input[name=name]').val(),          
           'mobile':$('input[name=telephone]').val(),
           'verify':$('input[name=verify]').val(),
         }
  
  
         if(obj.verify==''){
           alert("请输入验证码");
           return false;
         }
         if(obj.type==''){
           alert("请选择许可证类型");
           return false;
         }        
         if(obj.name==''){
           alert("请输入姓名");
           return false;
         }
         if(!checkPhone(obj.mobile)){
           alert("手机号码输入有误,请重新输入");
           return false;
         }
  
  
         $.ajax({ 
          type : "POST", //提交方式 
          url : "/index.php?m=formguide&c=index&a=show&formid=18&siteid=1",//路径 
          data : { 
           "dosubmit":"dosubmit",
           "ajax":"1",
  
           //'info[moreinfo][]':moreinfo,
           'info[type]':obj.type,
           'info[name]':obj.name,
           'info[telephone]':obj.mobile,
           'verify':obj.verify,
          },//数据,这里使用的是Json格式进行传输 
          //dataType: "json",
          success : function(result) {//返回数据根据结果进行相应的处理             
           if(result == "ok"){
             alert('您已提交成功,我们会马上安排人员和您联系!');
            }else if(result == "codeerror"){
                 alert('验证码输入错误!');
            }
          } 
         });
           e.stopPropagation();//禁止响应父元素的相关事件
           e.preventDefault();//防止跳转
       })
     })
  
  
     function checkPhone(phone){ 
       if(!(/^1[3456789]\d{9}$/.test(phone))){ 
         return false; 
       }else{
         return true;
       }
       
     }

2、服务器端改成如下的就行,/phpcms/modules/formguide/index.php的show()方法

if($_POST['ajax'] == 1){
             if(isset($_POST['verify'])){
                 //启动session
                 $session_storage = 'session_'.pc_base::load_config('system','session_storage');
                 pc_base::load_sys_class($session_storage);
                 //验证码
                 if (($_SESSION['code'] != strtolower($_POST['verify'])) || empty($_SESSION['code'])) {
                     echo "codeerror";exit;
                 } else {
                     $_SESSION['code'] = '';
                 }
             }
 }else{
             if(isset($_POST['verify'])){
                 //启动session
                 $session_storage = 'session_'.pc_base::load_config('system','session_storage');
                 pc_base::load_sys_class($session_storage);
                 //验证码
                 if (($_SESSION['code'] != strtolower($_POST['verify'])) || empty($_SESSION['code'])) {
                     showmessage("验证码错误");
                 } else {
                     $_SESSION['code'] = '';
                 }
             }
 }
if($_POST['ajax'] == 1){             
  echo "ok";         
}else{             
  showmessage("您已提交成功,我们会马上安排人员和您联系!", APP_PATH);        
}

3、验证码的写法

<a href="javascript:;" title="点击刷新图片验证码">
   {php pc_base::load_sys_class('form', '', 0);}
   {form::checkcode('code_img')}
</a>
<style>#code_img{height:38px;width:98px;}</style>

最终效果:

phpcms利用ajax实现留言功能,提升用户体验

感兴趣的朋友,可以下载下来作为参考

相关推荐

评论 抢沙发

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址