如何用jQuery/JS动态更新WordPress Amelia插件AJAX POST自定义字段

要在用户点击提交按钮前动态修改Amelia预约请求里customFields的字段值，核心思路是拦截AJAX请求并修改请求数据——因为customFields是JSON字符串格式，需要先解析为对象修改后再重新序列化。

方法一：使用jQuery拦截请求 #

如果站点已加载jQuery，可使用以下代码：

// 拦截Amelia的预约提交AJAX请求
$(document).ajaxSend(function(event, xhr, settings) {
    // 匹配Amelia的AJAX接口，可根据实际请求参数调整判断条件
    if (settings.url.includes('/wp-admin/admin-ajax.php') && settings.data?.includes('action=amelia')) {
        // 解析请求中的数据
        const formData = new URLSearchParams(settings.data);
        const requestData = JSON.parse(formData.get('data'));

        // 更新appointment.bookings中的customFields
        if (requestData.appointment?.bookings?.length) {
            requestData.appointment.bookings.forEach(booking => {
                const customFields = JSON.parse(booking.customFields);
                // 修改Test Field 1的值
                if (customFields['1']?.label === 'Test Field 1') {
                    customFields['1'].value = '自定义值1'; // 替换为你的目标值
                }
                // 修改Test Field 2的值
                if (customFields['2']?.label === 'Test Field 2') {
                    customFields['2'].value = '自定义值2'; // 替换为你的目标值
                }
                booking.customFields = JSON.stringify(customFields);
            });
        }

        // 更新顶层booking对象中的customFields
        if (requestData.booking) {
            const customFields = JSON.parse(requestData.booking.customFields);
            if (customFields['1']?.label === 'Test Field 1') {
                customFields['1'].value = '自定义值1';
            }
            if (customFields['2']?.label === 'Test Field 2') {
                customFields['2'].value = '自定义值2';
            }
            requestData.booking.customFields = JSON.stringify(customFields);
        }

        // 将修改后的数据放回请求中
        formData.set('data', JSON.stringify(requestData));
        settings.data = formData.toString();
    }
});

方法二：原生JavaScript拦截请求 #

如果不需要依赖jQuery，可通过重写XMLHttpRequest方法实现：

// 保存原生send方法
const originalXhrSend = XMLHttpRequest.prototype.send;
XMLHttpRequest.prototype.send = function(body) {
    // 判断是否为Amelia的提交请求
    if (this.url.includes('/wp-admin/admin-ajax.php') && body?.includes('action=amelia')) {
        const formData = new URLSearchParams(body);
        const requestData = JSON.parse(formData.get('data'));

        // 处理appointment.bookings里的customFields
        if (requestData.appointment?.bookings?.length) {
            requestData.appointment.bookings.forEach(booking => {
                const customFields = JSON.parse(booking.customFields);
                if (customFields['1']?.label === 'Test Field 1') {
                    customFields['1'].value = '自定义值1';
                }
                if (customFields['2']?.label === 'Test Field 2') {
                    customFields['2'].value = '自定义值2';
                }
                booking.customFields = JSON.stringify(customFields);
            });
        }

        // 处理顶层booking里的customFields
        if (requestData.booking) {
            const customFields = JSON.parse(requestData.booking.customFields);
            if (customFields['1']?.label === 'Test Field 1') {
                customFields['1'].value = '自定义值1';
            }
            if (customFields['2']?.label === 'Test Field 2') {
                customFields['2'].value = '自定义值2';
            }
            requestData.booking.customFields = JSON.stringify(customFields);
        }

        // 更新请求体
        formData.set('data', JSON.stringify(requestData));
        body = formData.toString();
    }
    // 调用原生send方法发送修改后的请求
    originalXhrSend.call(this, body);
};

注意事项 #

1. 请求匹配调整：可通过浏览器开发者工具查看实际Amelia AJAX请求参数，修改action=amelia的判断条件，确保只拦截目标请求。
2. 动态值替换：可将固定的自定义值1/2替换为动态内容，比如页面元素的值（document.getElementById('xxx').value）、URL参数等。
3. 代码部署：将代码添加到WordPress主题的自定义JS区域，或通过自定义插件加载，确保代码在Amelia的提交脚本之前执行。

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