如何让WordPress版BreezingForms通过AJAX提交并绑定ajaxComplete事件？

我之前维护过几个用BreezingForms的WordPress站点，确实碰到过这个问题——插件本身没提供直接绑定AJAX完成事件的设置，但我们可以通过自定义JavaScript来实现，而且不用修改插件核心代码（避免后续更新覆盖）。下面是具体的实现步骤：

1. 先定位BreezingForms的AJAX请求特征 #

首先打开浏览器的开发者工具（F12），切换到Network标签，然后提交一次BreezingForms的表单，找到对应的AJAX请求。你会发现它的请求一般是发到WordPress的admin-ajax.php，而且请求数据里会包含特定的标识（比如bf_process_form或者ff_form_submit，不同版本可能略有差异）。这个标识就是我们用来区分BreezingForms请求和其他AJAX请求的关键。

2. 编写全局AJAX监听代码 #

利用jQuery的ajaxComplete全局事件，我们可以监听所有AJAX请求完成的时刻，然后通过刚才找到的请求特征，只对BreezingForms的请求执行自定义逻辑。代码示例如下：

jQuery(document).ready(function($) {
    // 监听全局AJAX完成事件
    $(document).ajaxComplete(function(event, xhr, settings) {
        // 检查当前请求是否属于BreezingForms
        // 这里的判断条件根据你实际找到的请求特征调整
        if (settings.data && settings.data.indexOf('bf_process_form') !== -1) {
            // 这里就是BreezingForms表单AJAX提交完成后的回调逻辑
            console.log('BreezingForms表单AJAX提交完成！');
            
            // 如果你需要处理返回的响应数据
            try {
                // 尝试解析JSON格式的响应
                const response = JSON.parse(xhr.responseText);
                console.log('表单提交响应数据:', response);
                // 比如根据响应状态做后续操作，比如显示成功提示、刷新页面部分内容等
                if (response.success) {
                    alert('表单提交成功！');
                }
            } catch (e) {
                // 处理非JSON格式的响应（比如插件返回的HTML）
                console.log('表单提交响应（非JSON）:', xhr.responseText);
            }
        }
    });
});

3. 将代码添加到WordPress站点 #

为了规范且避免主题更新丢失代码，推荐用WordPress的脚本加载机制来添加这段代码：

1. 在你的当前主题目录下创建一个js文件夹，然后新建bf-ajax-listener.js文件，把上面的JS代码粘贴进去。
2. 打开主题的functions.php文件，添加以下代码来注册并加载这个脚本：

function enqueue_breezingforms_ajax_listener() {
    // 加载自定义脚本，依赖jQuery（WordPress默认已经加载）
    wp_enqueue_script(
        'bf-ajax-listener',
        get_stylesheet_directory_uri() . '/js/bf-ajax-listener.js',
        array('jquery'),
        '1.0',
        true // 放在页面底部加载，提升性能
    );
}
add_action('wp_enqueue_scripts', 'enqueue_breezingforms_ajax_listener');

如果你不想折腾主题文件，也可以用Code Snippets这类插件直接添加自定义JavaScript代码，操作更简单。

注意事项 #

• 不同版本的BreezingForms可能使用不同的AJAX请求标识，一定要自己通过开发者工具确认，再调整代码里的判断条件。
• 如果插件使用了自己的AJAX实现（而非WordPress的admin-ajax.php），你可以尝试监听它可能触发的自定义事件（比如在提交按钮的点击事件里找是否有trigger自定义事件的代码），不过这种情况比较少见。

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