如何在WordPress中运行自定义JavaScript并实现表单API交互

1. 加载自定义JavaScript到WordPress #

直接修改主题functions.php（推荐用子主题，避免主题更新丢失代码），通过wp_enqueue_script加载你的自定义JS文件：

function load_custom_script() {
    // 加载自定义JS，依赖jQuery（按需添加）
    wp_enqueue_script(
        'custom-survey-script',
        get_stylesheet_directory_uri() . '/js/survey-handler.js',
        array('jquery'),
        '1.0',
        true // 放在页面底部加载，提升性能
    );
    // 传递WordPress内部变量到JS（比如AJAX地址、验证nonce）
    wp_localize_script(
        'custom-survey-script',
        'wpSiteData',
        array(
            'ajaxUrl' => admin_url('admin-ajax.php'),
            'nonce' => wp_create_nonce('survey_action_nonce')
        )
    );
}
add_action('wp_enqueue_scripts', 'load_custom_script');

之后在主题目录下创建js/survey-handler.js，编写DOM操控和表单逻辑。

2. 问卷提交与外部API交互 #

在survey-handler.js中监听表单提交事件，收集数据并发送POST请求到你的API：

document.addEventListener('DOMContentLoaded', () => {
    const surveyForm = document.getElementById('your-survey-form');
    if (!surveyForm) return;

    surveyForm.addEventListener('submit', (e) => {
        e.preventDefault();
        
        // 收集表单数据转成JSON
        const formData = new FormData(surveyForm);
        const payload = Object.fromEntries(formData);

        // 发送POST到外部API
        fetch('https://your-api-domain.com/receive-data', {
            method: 'POST',
            headers: { 'Content-Type': 'application/json' },
            body: JSON.stringify(payload)
        })
        .then(res => res.json())
        .then(apiRes => {
            // API响应成功后，触发WordPress页面创建
            createWPPage(apiRes);
        })
        .catch(err => {
            console.error('API提交失败:', err);
            // 这里可以添加用户可见的错误提示
        });
    });
});

3. 根据API响应创建WordPress页面 #

推荐用WordPress的AJAX接口中转（比直接调用REST API更安全，支持未登录用户）：

第一步：在functions.php中添加AJAX处理函数

function create_survey_page() {
    // 验证请求合法性
    check_ajax_referer('survey_action_nonce', 'nonce');
    
    // 获取前端传递的页面数据
    $page_data = json_decode(file_get_contents('php://input'), true);
    
    // 创建页面
    $page_id = wp_insert_post(array(
        'post_title' => sanitize_text_field($page_data['title']),
        'post_content' => wp_kses_post($page_data['content']),
        'post_status' => 'publish', // 可选'draft'保存为草稿
        'post_type' => 'page'
    ));

    if ($page_id) {
        wp_send_json_success(array('page_link' => get_permalink($page_id)));
    } else {
        wp_send_json_error('页面创建失败');
    }
}
// 登录用户和未登录用户都能调用
add_action('wp_ajax_create_survey_page', 'create_survey_page');
add_action('wp_ajax_nopriv_create_survey_page', 'create_survey_page');

第二步：在survey-handler.js中添加页面创建函数

function createWPPage(apiResponse) {
    // 根据API响应组装页面数据
    const pagePayload = {
        title: apiResponse.page_title || '用户问卷结果页',
        content: apiResponse.page_content || '<p>这是根据您的问卷生成的页面</p>',
        nonce: wpSiteData.nonce
    };

    fetch(wpSiteData.ajaxUrl, {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify(pagePayload)
    })
    .then(res => res.json())
    .then(wpRes => {
        if (wpRes.success) {
            // 页面创建成功，跳转到新页面
            window.location.href = wpRes.data.page_link;
        } else {
            console.error('WordPress页面创建失败:', wpRes.data);
        }
    })
    .catch(err => console.error('请求出错:', err));
}

关键注意事项 #

• 跨域问题：如果你的外部API和WordPress域名不同，需要在API端配置CORS允许WordPress域名访问，或在WordPress中添加跨域头（测试用可临时加header("Access-Control-Allow-Origin: *");到functions.php的init钩子）。
• 表单验证：前端要做必填项、格式验证，后端也要二次校验数据，防止恶意提交。
• 权限控制：如果允许未登录用户创建页面，建议添加验证码、限制创建次数，避免滥用。

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