表单提交后在success.html展示用户数据及PHP邮件发送问题

现有index.html页面带姓名、手机号输入表单，send.php负责把表单数据发往指定邮箱。点击“提交订单”后，页面先跳转至send.php，再跳转至success.html。需实现两个需求：

1. 在success.html指定位置显示用户输入的姓名和手机号，方便核验数据正确性；
2. 保留send.php的邮件通知功能。

尝试使用FormChimp的jQuery代码实现但存在疑问，咨询具体实现方法及可能踩的坑。附上所用FormChimp代码：

/*! FormChimp v1.2.1 | Fabio Quarantini */ 
! function(a, b, c, d) {
  a.fn.formchimp = function(b) {
    var d = a(this),
      e = a("body"),
      f = d.attr("action").replace("/post?", "/post-json?").concat("&c=?"),
      g = d.find('[type="submit"]'),
      h = {
        appendElement: d,
        buttonSelector: g,
        buttonText: "",
        debug: !1,
        errorMessage: "",
        onMailChimpSuccess: function() {},
        onMailChimpError: function() {},
        responseClass: "mc-response",
        successMessage: "",
        url: f
      },
      i = h.buttonSelector.text();
    a.extend(h, b), a(d).on("submit", function(b) {
      b.preventDefault(), e.removeClass("mc-success mc-error").addClass("mc-loading"), 0 === a("." + h.responseClass).length ? $responseContainer = a("<div/>").addClass(h.responseClass).appendTo(h.appendElement) : $responseContainer.html(""), a.ajax({
        url: h.url,
        data: d.serialize(),
        dataType: "jsonp"
      }).done(function(b) {
        h.debug && console.log(JSON.stringify(b));
        var d = b.msg;
        isNaN(d.charAt(0)) || "-" !== d.charAt(2) || (d = d.substring(3)), e.addClass("mc-" + b.result).removeClass("mc-loading"), "success" === b.result ? ("" !== h.successMessage && (d = h.successMessage), "" !== h.buttonText && h.buttonSelector.text(h.buttonText), a(c).trigger("mailChimpSuccess"), h.onMailChimpSuccess.call()) : ("" !== h.errorMessage && (d = h.errorMessage), "" !== h.buttonText && h.buttonSelector.text(i), a(c).trigger("mailChimpError"), h.onMailChimpError.call()), $responseContainer.html(d)
      })
    })
  }
}(jQuery, window, document);

方案一：PHP会话传数据（推荐） #

1. 修改send.php：
   接收表单数据后先存入PHP会话，完成邮件发送后跳转至成功页：

   session_start();
   // 注意name/phone需与index.html表单的name属性对应
   $_SESSION['user_name'] = $_POST['name'];
   $_SESSION['user_phone'] = $_POST['phone'];
   
   // 保留原有邮件发送逻辑代码
   
   // 跳转至成功页
   header("Location: success.html");
   exit;
   

2. 将success.html改为success.php：
   静态HTML无法读取PHP会话，改为PHP文件后在指定位置输出数据：

   session_start();
   ?>
   <!-- 保留原success.html所有内容 -->
   <div class="verify-info">
     <p>您提交的姓名：<?php echo $_SESSION['user_name']; ?></p>
     <p>您提交的手机号：<?php echo $_SESSION['user_phone']; ?></p>
   </div>
   <!-- 保留原success.html所有内容 -->
   <?php
   // 可选：销毁会话避免残留数据
   session_destroy();
   ?>
   

方案二：URL参数传数据 #

若不想修改success.html为PHP文件，可使用URL参数传递，但手机号会暴露在地址栏，隐私性差：

1. 修改send.php跳转逻辑：

   $name = urlencode($_POST['name']);
   $phone = urlencode($_POST['phone']);
   header("Location: success.html?name={$name}&phone={$phone}");
   exit;
   

2. 在success.html添加JS读取参数：
   页面中插入以下JS代码，将数据渲染到指定位置：

   // 工具函数：获取URL参数
   function getUrlParam(key) {
     const reg = new RegExp(`(^|&)${key}=([^&]*)(&|$)`);
     const match = window.location.search.substr(1).match(reg);
     return match ? decodeURI(match[2]) : null;
   }
   
   // 页面加载完成后渲染数据
   window.onload = () => {
     document.querySelector('.user-name').textContent = getUrlParam('name');
     document.querySelector('.user-phone').textContent = getUrlParam('phone');
   };
   

   同时在success.html预留对应元素：

   <div class="verify-info">
     <p>您提交的姓名：<span class="user-name"></span></p>
     <p>您提交的手机号：<span class="user-phone"></span></p>
   </div>
   

关于FormChimp代码的适配说明 #

你使用的FormChimp是针对MailChimp邮件列表订阅开发的AJAX插件，与当前跳转页面的需求不匹配：

• 若保留原跳转流程，直接弃用FormChimp即可；
• 若改为AJAX无刷新提交，需去掉表单的action和method属性，将FormChimp的url配置为send.php，同时修改send.php返回符合插件要求的JSON格式（需包含result和msg字段），最后在onMailChimpSuccess回调中跳转至success.html并传递数据（可使用URL参数或本地存储）。

1. 会话数据丢失：若服务器会话配置异常或用户禁用Cookie，会话传递数据会失败，此时URL参数方案更可靠但存在隐私风险；
2. 隐私泄露风险：URL传递手机号会被记录在浏览器历史、服务器日志中，敏感数据优先使用会话方案；
3. FormChimp适配问题：原插件针对MailChimp接口开发，直接对接send.php时，send.php必须返回{"result":"success/error", "msg":"提示内容"}格式的响应，否则插件无法正常处理；
4. 表单验证缺失：无前端验证时用户可能提交空数据，建议在index.html添加验证逻辑（如检查姓名非空、手机号格式正确）；
5. 邮件失败无提示：send.php中若邮件发送失败，需跳转至错误页面而非直接跳转到success.html，避免用户误以为提交成功。

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