表单提交发邮件并重定向后，如何用jQuery显示输入的姓名？

核心问题在于表单默认提交后重定向会丢失原POST请求的表单数据，所以我们需要提前把用户姓名传递到目标页面。下面分两种常见场景给出具体解决方案：

场景1：后端脚本处理邮箱发送（如PHP/Node.js） #

如果是后端负责接收表单数据、发送邮件，最可靠的方式是在后端重定向时把姓名作为URL参数附加到目标地址：

以PHP为例，后端处理逻辑大概是这样：

// 获取用户提交的姓名
$username = $_POST['name'];
// 这里编写发送邮件的业务代码...

// 重定向时对姓名编码（避免中文/特殊字符乱码），拼入URL参数
header("Location: http://127.0.0.1/contact.html?formsubmit=success&name=" . urlencode($username));
exit;

然后在contact.html中用jQuery读取URL参数并渲染感谢信息：

$(document).ready(function() {
    // 封装一个获取URL参数的工具函数
    function getUrlParam(paramName) {
        const reg = new RegExp(`(^|&)${paramName}=([^&]*)(&|$)`);
        const matchResult = window.location.search.substr(1).match(reg);
        return matchResult ? decodeURIComponent(matchResult[2]) : null;
    }

    // 判断是否是表单提交成功的跳转，并读取姓名
    if (window.location.search.includes('formsubmit=success')) {
        const userName = getUrlParam('name');
        if (userName) {
            // 替换页面中的感谢信息容器（假设你页面有<div class="thank-you"></div>）
            $('.thank-you').text(`感谢您的提交，${userName}！我们会尽快与您取得联系。`);
        } else {
            $('.thank-you').text('感谢您的提交！我们会尽快与您取得联系。');
        }
    }
});

场景2：纯前端处理表单提交（如使用EmailJS等第三方邮件服务） #

如果是前端直接调用API发送邮件，可在提交成功后将姓名存入localStorage，再重定向到目标页面读取：

第一步：原表单页面的提交处理 #

$('form').submit(function(e) {
    e.preventDefault(); // 阻止默认表单提交行为
    const userName = $('input[name="name"]').val(); // 获取用户输入的姓名

    // 调用第三方邮件服务API（以EmailJS为例）
    emailjs.send('你的服务ID', '你的模板ID', {
        name: userName,
        // 其他表单字段：邮箱、留言内容等
    }).then(() => {
        // 提交成功后存入姓名到本地存储
        localStorage.setItem('submittedUserName', userName);
        // 跳转到目标页面
        window.location.href = 'http://127.0.0.1/contact.html?formsubmit=success';
    }, (error) => {
        console.error('邮件发送失败:', error);
        // 这里可以添加错误提示逻辑
    });
});

第二步：目标页面（contact.html）的信息渲染 #

$(document).ready(function() {
    if (window.location.search.includes('formsubmit=success')) {
        const userName = localStorage.getItem('submittedUserName');
        if (userName) {
            $('.thank-you').text(`感谢您的提交，${userName}！我们会尽快与您取得联系。`);
            // 读取后删除本地存储，避免用户刷新/再次打开页面时重复显示
            localStorage.removeItem('submittedUserName');
        } else {
            $('.thank-you').text('感谢您的提交！我们会尽快与您取得联系。');
        }
    }
});

额外注意事项 #

• 使用URL参数传递时，务必对特殊字符/中文做编码处理，避免出现乱码或参数截断问题；
• 使用localStorage时，记得读取后删除对应数据，防止残留数据影响后续页面访问；
• 如果你的表单是纯默认POST提交（无JS拦截），必须由后端负责传递姓名参数，前端无法获取到已提交的POST数据。

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