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(),//下拉框
           'sex':$('input[name=sex]:checked').val(),//单选框
           'name':$('input[name=name]').val(),//文本框 
           'content':$('textarea[name=textarea]').val(), //多行文本框
           'mobile':$('input[name=telephone]').val(),
           'verify':$('input[name=verify]').val(),
         }

         //元素存在才做验证
        if($('input[name=tel]').length > 0){
             if(obj.tel== ''){
                 alert('请输入电话号码！');
                 $('input[name=tel]').focus();
                 return false;
             }
         }
 
         //元素存在才做验证  — 单选框
         if($('input[name=sex]').length > 0){
             if(typeof(obj.sex) == 'undefined'){
                 alert('请选择性别！');
                 return false;
             }
         } 
 
         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实现留言功能，提升用户体验

相关推荐