jQuery Ajax PHP邮件表单仅返回首个复选框值问题求助

问题描述 #

首次使用jQuery开发时遇到多选复选框值无法全部返回的问题，无论选中哪些选项，邮件中仅返回首个复选框值‘BLACK’。已更新复选框ID确保彼此唯一，需要实现将选中的复选框值以列表形式返回。

解决方案 #

需同时修改前端jQuery代码和后端PHP代码，具体如下：

1. 前端jQuery代码修改 #

原代码中$("#servicelist").val()仅能获取单个元素的值，而复选框无统一的servicelistID，需选中所有已勾选的name="servicelist[]"复选框，提取值并组成数组：

function sendSupplierForm() {
    var data = {
        ordernumber: $("#ordernumber").val(),
        // 修改此处：获取所有选中的复选框值并转为数组
        servicelist: $("input[name='servicelist[]']:checked").map(function(){
            return $(this).val();
        }).get()
    };
    jQuery.ajax({
        url: "email.php",
        data: data,
        dataType:'text',
        type: "POST",
        success:function(data){
            $("#EmailStatus").html(data);
        },
        error:function (){}
    });
}

2. 后端PHP代码修改 #

前端传递的servicelist是数组，直接输出会显示Array，需将数组转为HTML列表格式，同时增加空值判断避免报错：

<?php
$mailto = "info@******.com";
$subject = "Test Form";
$headers = "From: info@******.com
MIME-Version: 1.0
Content-Type: text/html; charset=utf-8
";

// 处理订单号，避免空值报错
$ordernumber = isset($_POST['ordernumber']) ? $_POST['ordernumber'] : '无';
// 处理服务列表，转为HTML无序列表
$serviceListHtml = '<p>Service List:</p><ul>';
if(isset($_POST['servicelist']) && is_array($_POST['servicelist'])){
    foreach($_POST['servicelist'] as $service){
        // 转义特殊字符，避免XSS风险
        $serviceListHtml .= '<li>'.htmlspecialchars($service).'</li>';
    }
} else {
    $serviceListHtml .= '<li>未选择任何服务</li>';
}
$serviceListHtml .= '</ul>';

$message = "<html><head><title>Supplier Form Details</title></head><body>
<p>Original Order Number: $ordernumber</p>
$serviceListHtml
</body></html>";

// 发送邮件
$result1 = mail($mailto, $subject, $message, $headers);

// 反馈发送状态
if ($result1) {
    print "<p class='success'>SUCCESS!!! The details have been sent.</p>";
} else {
    print "<p class='Error'>ERROR... Sorry there is a problem sending the details.</p>";
}
?>

关键说明 #

• 前端通过:checked筛选已勾选的复选框，map()遍历提取值，get()将jQuery对象转为原生数组。
• 后端使用htmlspecialchars()避免XSS风险，同时处理未选择任何服务的边界情况。

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