我太懂你现在的糟心感受了——把WooCommerce订单追踪短代码塞进弹窗后，一点提交就页面重载，弹窗直接消失，完全达不到预期的无刷新效果。你那段代码的问题主要出在表单数据获取错误和没处理WooCommerce的安全验证上，我来给你修正并完善整个实现：

第一步：修正核心Ajax逻辑 #

你的原代码提前创建了formData，但没动态抓取用户输入的订单号和邮箱，还忽略了WooCommerce表单自带的_wpnonce验证字段（这会直接导致后端拒绝请求）。下面是修正后的JS代码：

// 确保jQuery加载完成后执行
jQuery(document).ready(function($) {
    // 拦截订单追踪表单的提交事件
    $('.track_order').on('submit', function(e) {
        e.preventDefault(); // 阻止默认表单提交（这是关键！）
        const $form = $(this);
        const $resultContainer = $('.track-results');

        // 动态获取表单所有数据（包括WooCommerce的安全验证字段）
        const formData = new FormData($form[0]);
        // 添加标识，告诉后端这是Ajax请求
        formData.append('from_ajax', '1');

        // 发送Ajax请求
        $.ajax({
            url: $form.attr('action'),
            type: $form.attr('method'),
            data: formData,
            processData: false,
            contentType: false,
            beforeSend: function() {
                // 可以在这里加加载状态，提升用户体验
                $resultContainer.html('<p>正在查询订单...</p>');
            },
            success: function(response) {
                // 将返回的追踪结果插入弹窗内的结果容器
                $resultContainer.html(response);
            },
            error: function() {
                $resultContainer.html('<p>查询出错，请稍后重试或检查输入信息</p>');
            }
        });
    });

    // 弹窗的打开/关闭逻辑
    $('#open').click(function() {
        $('#a, #b').show();
    });

    $('.cancel').click(function() {
        $('#a, #b').fadeOut();
        // 关闭弹窗时清空表单和结果，方便下次使用
        $('.track_order')[0].reset();
        $('.track-results').html('');
    });
});

第二步：调整弹窗HTML结构 #

你需要在弹窗里新增一个专门显示追踪结果的容器，同时完善弹窗的关闭按钮结构：

<div class="main">
    <div>
        <button id="open">Order Tracking</button>
    </div>
</div>

<div class="container" id="a"></div>
<div class="modal" id="b">
    <div class="header">
        <a href="#" class="cancel">&times;</a>
    </div>
    <div class="content">
        <!-- WooCommerce订单追踪短代码 -->
        [woocommerce_order_tracking]
        <!-- 新增结果展示容器 -->
        <div class="track-results"></div>
    </div>
    <div class="footer">
        <!-- 保留原结构即可，WooCommerce表单自带提交按钮 -->
    </div>
</div>

第三步：CSS样式微调 #

给结果容器加一点样式，让它和表单区分开，提升视觉体验：

.track-results {
    margin: 20px 12%;
    padding: 15px;
    border: 1px solid #eee;
    border-radius: 4px;
    min-height: 50px;
}

关键注意点 #

• WooCommerce安全验证：一定要用new FormData($form[0])获取所有表单数据，包括WooCommerce自动生成的_wpnonce字段，不然后端会直接拒绝请求。
• jQuery别名兼容：有些WordPress环境禁用了$，所以用jQuery(document).ready(function($) { ... })确保回调里可以正常使用$。
• 弹窗重置逻辑：关闭弹窗时清空表单和结果容器，避免残留旧数据影响下一次查询。

这样修改后，用户提交订单追踪请求时，页面不会重载，结果会直接显示在弹窗内的track-results容器里，完美解决你的问题！

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