PHP表单数据校验及邮件发送代码 修复Ajax POST调用失效问题

前端问题与修复代码 #

当前前端存在以下核心问题：

• 存在两套重复的表单提交监听逻辑，原生JS写的XMLHttpRequest逻辑只写了回调，没有调用open、send方法，不会发送请求还会和jQuery逻辑冲突
• 表单绑定、参数取值的选择器全部错误，目标元素不存在
• 两个隐藏域重复使用了id="doc_type"，违反HTML规范导致取值混乱
• 引入的JS资源路径错误，后缀错写为.html
• AJAX回调没有判断后端返回的校验结果，不管成功失败直接跳转

修复后的前端代码：

<body>
<div class="tab_content active_tab" id="name">
<!-- 给表单加ID，输入框补全ID，修改重复的doc_type ID -->
<form method="post" class="import_form" id="name_form">
<input type="hidden" id="doc_type_1" name="doc_type" value="" required>
<textarea name="name" id="name_val" placeholder="Name" required></textarea>
<input type="hidden" name="importer1" value="1">
<button type="submit">SEND</button>
</form>
</div>

<div class="tab_content" id="account_type">
<form method="post" class="import_form" id="account_type_form">
<input type="hidden" id="doc_type_2" name="doc_type" value="" required>
<textarea name="account_type" id="accounttype_val" placeholder="ACCOUNT TYPE" required></textarea>
<input type="hidden" name="date" id="date" value="" placeholder="Date" required>
<input type="hidden" name="importer2" value="1">
<button type="submit">SEND</button>
</form>
</div>

</div>
</div>
<!-- 修复JS资源后缀 -->
<script src="assets/js/jquery.min.js"></script>
<script src="assets/bootstrap/js/bootstrap.min.js"></script>
</body>

<script>
function open_tap(tab){
var tabs = document.getElementsByClassName('tab_content');
var tabs_key = document.getElementsByClassName('import_tab');
for(let i = 0; i < tabs.length; i++){
tabs[i].style.display = 'none';
}
for(let i = 0; i < tabs_key.length; i++){
tabs_key[i].style.borderBottom  = 'none';
}
document.getElementById(tab).style.display = 'block';
document.getElementsByClassName(tab)[0].style.borderBottom  = '1px solid #fff';
}
</script>

<script>
$("#loader").hide();    
function loading(t){
    $("#loader").show();
    setTimeout(function(){
    $("#loader").hide();    
    },t);
}
// 修复表单选择器、doc_type取值选择器
$('#name_form').submit(function(e){
    e.preventDefault();
    var a = $('#name_val').val(),
    b = $('#doc_type_1').val();
    $.ajax({
    method:"POST",
    url:"set.php",
    data:{name:a,doc_type:b,importer1:true},
    dataType:'json',
    beforeSend:function(){
        loading(2500);
    },
    success:function(r){
        loading(5000);
        // 增加校验结果判断
        if(r.code == 200){
            location = 'image-2.html';
        }else{
            alert(r.msg);
        }
    }
    });
});
// 修复表单选择器、doc_type取值选择器
$('#account_type_form').submit(function(e){
    e.preventDefault();
    var a = $('#accounttype_val').val(),
    b = $('#doc_type_2').val(), c = $('#date').val();
    $.ajax({
    method:"POST",
    url:"set.php",
    data:{accounttype_val:a,doc_type:b,date:c,importer2:true},
    dataType:'json',
    beforeSend:function(){
        loading(2500);
    },
    success:function(r){
        loading(5000);
        if(r.code == 200){
            location = 'image-2.html';
        }else{
            alert(r.msg);
        }
    }
    });
});
</script>

后端问题与修复代码 #

当前后端存在以下核心问题：

• 入口判断错误，AJAX请求根本没有传submit参数，整个逻辑不会执行
• 没有邮件发送的核心代码，只定义了收件人没有调用发送方法
• 校验逻辑错误，两个表单是分开提交的，同时要求两个参数都不为空会导致所有请求都校验失败
• 变量拼写错误，$acounttype和$accounttype不一致
• 没有给前端返回响应结果

修复后的后端代码：

<?php 
// 定义返回格式
header('Content-Type: application/json');
$to = "anything@domain.com";
$from = "sender@yourdomain.com"; // 替换为你的发件人邮箱
$headers = "From: " . $from . "\r\n" . "Reply-To: " . $from . "\r\n" . "Content-type: text/html; charset=utf-8\r\n";

// 区分提交的表单类型
if(isset($_POST['importer1'])){
    // 处理姓名表单提交
    if(empty($_POST["name"])){
        echo json_encode(['code'=>400,'msg'=>'姓名不能为空']);
        exit;
    }
    $name = trim($_POST["name"]);
    $doc_type = trim($_POST["doc_type"]);
    // 构造邮件内容
    $subject = "新的姓名表单提交";
    $body = "提交信息：<br>姓名：".$name."<br>文档类型：".$doc_type;
    // 发送邮件
    if(mail($to,$subject,$body,$headers)){
        echo json_encode(['code'=>200,'msg'=>'提交成功']);
    }else{
        echo json_encode(['code'=>500,'msg'=>'邮件发送失败']);
    }
    exit;
}elseif(isset($_POST['importer2'])){
    // 处理账户类型表单提交
    if(empty($_POST["accounttype_val"])){
        echo json_encode(['code'=>400,'msg'=>'账户类型不能为空']);
        exit;
    }
    $accounttype = trim($_POST["accounttype_val"]);
    $doc_type = trim($_POST["doc_type"]);
    $date = trim($_POST["date"]);
    // 构造邮件内容
    $subject = "新的账户类型表单提交";
    $body = "提交信息：<br>账户类型：".$accounttype."<br>文档类型：".$doc_type."<br>日期：".$date;
    // 发送邮件
    if(mail($to,$subject,$body,$headers)){
        echo json_encode(['code'=>200,'msg'=>'提交成功']);
    }else{
        echo json_encode(['code'=>500,'msg'=>'邮件发送失败']);
    }
    exit;
}else{
    echo json_encode(['code'=>400,'msg'=>'非法请求']);
    exit;
}
?>

额外注意事项 #

• 如果原生mail()函数发送失败，建议使用PHPMailer配置SMTP服务发送，成功率更高
• 生产环境请对所有提交参数做安全过滤，避免XSS、邮件头注入攻击
• 服务器需要配置好邮件发送服务才能正常触发邮件投递

内容的提问来源于stack exchange，提问作者Coder199