最近帮客户做网站的时候，基本都有遇到需要输入验证码留言的功能需求，如果直接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>
最终效果：
感兴趣的朋友，可以下载下来作为参考
