如何将织梦dedecms模板自定义表单提交改为ajax提交

2024-06-20 阅读：1029 类型：后端分类：织梦cms 标签：织梦cms PHP AJAX

织梦cms由于系统比较旧，采用的是form表单的post提交方式，提交成功之后是跳转到首页，这点对于用户体验很不友好，我们可以将它改为ajax提交方式。

1、修改plus/diy.php

找到 showMsg($bkmsg,-1,3000); 改成：

if($setup == 'ajax'){
   echo "success";
   exit;
}else{
        showMsg($bkmsg,3000);
}

2、表单部分代码

<form method="post" >
    <input type="hidden" name="mh_type" value="tel">
    <input type="hidden" name="mh_board" value="tel"/>
    <h2 class="dddax">Quick Consultation</h2>
    <p class="frow"><input type="text" placeholder="Name" name="mh_name" required id="name_right"/></p>
    <p class="frow"><input type="text" placeholder="Tel" name="mh_hp" required maxlength="23" id="tel_right"/></p>
    <input type="hidden" name="action" value="post" />
    <input type="hidden" name="diyid" value="1" />
    <input type="hidden" name="do" value="2" />
    <input type="hidden" name="dede_fields" value="name,text;tel,text" />
    <input type="hidden" name="dede_fieldshash" value="882e4dde86f8648b2b5baef5219e6428" /></table>
    <a href="javascript:;" id="mobQuickBtn">submit</a>
</form>

2、前端ajax表单提交验证

<script>
$('#mobQuickBtn').click(function () {
    var name_right = $('#name_right').val();
    var tel_right = $('#tel_right').val();
    if(name_right== ''){
      alert('Name is Required Options')
      return false;
    }
    if(tel_right== ''){
      alert('Tel is Required Options')
      return false;
    }
     var dataString = {
      'name':$('#name_right').val(),
      'tel':$('#tel_right').val(),
      'setup':'ajax',
      'action':'post',
      'diyid':1,
      'do':2,
      'dede_fields':'name,text;tel,text',
      'dede_fieldshash':$('input[name="dede_fieldshash"]').val(),
      };
      $("#mobQuickBtn").attr('disabled',true)//在提交成功之前
      $.post("/plus/diy.php",dataString,function(result){
        if(result=="success"){
          alert('submit success!');
          $('#name_right').val('')
          $('#tel_right').val('')
          $("#mobQuickBtn").attr('disabled',false)//在提交成功之后重新启用该按钮
        }else{
          alert('submit error!');
          $("#mobQuickBtn").attr('disabled',false)//在提交成功之后重新启用该按钮
        }
      });
})
</script>

这样就完成了织梦cms有post表单提交改为ajax表单提交方式。