如何使用jQuery实现页面加载后仅提交1次购物车request-quote表单

解决方案 #

原有逻辑的核心问题是依赖URL的GET参数做重复提交拦截，参数会永久保留在地址栏，刷新后仍然存在，导致提交逻辑被阻断。推荐以下三种可落地的方案：

方案一：前端会话存储控制（最推荐） #

采用浏览器sessionStorage做会话级提交标记，既可以保证同一次页面加载仅提交1次，又能在页面刷新后自动重置状态，不受URL参数影响，代码如下：

<script>
jQuery(document).ready(function($) {
    // 仅同一次页面加载未提交过才执行提交
    if (!sessionStorage.getItem('ywraq_form_submitted')) {
        $("#yith-ywraq-form").submit();
        // 标记已提交，避免同次加载重复触发
        sessionStorage.setItem('ywraq_form_submitted', '1');
    }
});
// 页面卸载时清除标记，保证刷新后可重新提交
window.addEventListener('beforeunload', () => {
    sessionStorage.removeItem('ywraq_form_submitted');
});
</script>

该方案优势：

• 完全不依赖URL参数，地址栏带任何参数都不影响逻辑执行
• 同一次页面加载只会提交1次，不会出现重复提交问题
• 刷新页面、重新打开标签页都会自动重置状态，可正常触发新的提交

方案二：兼容老旧浏览器的Cookie控制 #

如果需要适配不支持sessionStorage的低版本浏览器，可以用Cookie实现相同逻辑：

<script>
jQuery(document).ready(function($) {
    // 读取Cookie工具方法
    const getCookie = (name) => {
        const value = `; ${document.cookie}`;
        const parts = value.split(`; ${name}=`);
        if (parts.length === 2) return parts.pop().split(';').shift();
    }
    if (!getCookie('ywraq_form_submitted')) {
        $("#yith-ywraq-form").submit();
        document.cookie = 'ywraq_form_submitted=1; path=/';
    }
});
// 页面卸载时清除Cookie
window.addEventListener('beforeunload', () => {
    document.cookie = 'ywraq_form_submitted=; path=/; expires=Thu, 01 Jan 1970 00:00:00 UTC';
});
</script>

方案三：后端跳转优化（仅调整原有逻辑） #

如果不想修改前端代码，可以调整表单提交后的后端跳转逻辑，提交完成后直接跳转到不带updated参数的原页面，这样刷新后地址栏没有拦截参数，原有逻辑可正常运行：

// 表单提交处理逻辑完成后添加
wp_redirect( site_url('request-quote/') );
exit;

内容的提问来源于stack exchange，提问作者thecodedeveloper.com