使用Ajax提交短码表单时出现错误求助

Hey there! Let's dig into why your wp_ajax_et_test_plugin_create_post action isn't playing nice with your shortcode-powered Ajax form. I've run into this exact scenario a bunch of times, so here are the most common fixes to check off:

First off, make sure you've registered both the logged-in and guest-facing hooks in your plugin or theme's functions.php—this is a super common oversight. If you only use wp_ajax_*, unlogged users won't be able to trigger the action. Here's the correct pattern:

// Register the Ajax hooks
add_action('wp_ajax_et_test_plugin_create_post', 'et_test_plugin_create_post_callback');
add_action('wp_ajax_nopriv_et_test_plugin_create_post', 'et_test_plugin_create_post_callback');

function et_test_plugin_create_post_callback() {
    // Your post creation logic goes here
    
    // Don't forget this! WordPress needs to stop execution after sending the response
    wp_send_json_success(['message' => 'Post created successfully!']);
    wp_die();
}

Pro tip: Omitting wp_die() or die() will cause WordPress to append extra content to your Ajax response, breaking the JSON format.

Your frontend JavaScript needs to target the right URL and pass the exact action name. Never hardcode the admin-ajax URL—use wp_localize_script to safely pass it from PHP to JS, right from your shortcode function:

function your_form_shortcode() {
    // Enqueue your Ajax script
    wp_enqueue_script('form-ajax-script', plugin_dir_url(__FILE__) . 'js/form-ajax.js', ['jquery'], '1.0', true);
    
    // Pass critical data to JS
    wp_localize_script('form-ajax-script', 'FormAjax', [
        'ajax_url' => admin_url('admin-ajax.php'),
        'nonce' => wp_create_nonce('et_test_plugin_form_nonce')
    ]);
    
    // Return your form HTML
    return '<form id="custom-post-form">...</form>';
}
add_shortcode('custom_post_form', 'your_form_shortcode');

Then in your JS, make sure the action parameter matches your hook exactly:

jQuery(document).ready(function($) {
    $('#custom-post-form').submit(function(e) {
        e.preventDefault();
        
        $.ajax({
            url: FormAjax.ajax_url,
            type: 'POST',
            data: {
                action: 'et_test_plugin_create_post', // Must match the hook name perfectly
                nonce: FormAjax.nonce,
                // Add your form fields here (e.g., title: $('#post-title').val())
            },
            success: function(response) {
                console.log(response);
                // Handle success (show a message, reset the form, etc.)
            },
            error: function(xhr) {
                console.log(xhr.responseText); // This will show WP error messages—super helpful for debugging!
            }
        });
    });
});

WordPress will block your Ajax request if you don't validate the nonce. Add this check at the top of your callback function:

function et_test_plugin_create_post_callback() {
    // Verify the nonce first
    if (!wp_verify_nonce($_POST['nonce'], 'et_test_plugin_form_nonce')) {
        wp_send_json_error(['message' => 'Security check failed!']);
    }
    
    // Rest of your post creation logic
}

If you're still stuck, add a debug log to your callback to confirm it's being hit:

function et_test_plugin_create_post_callback() {
    error_log('Ajax callback for et_test_plugin_create_post was triggered!');
    // ... rest of your code
}

Then check your WordPress debug.log (enable debug mode if you haven't already) to see if the message appears. If it doesn't, your action name is probably misspelled, or the hooks aren't registered properly.

Temporarily disable other plugins and switch to a default theme like Twenty Twenty-Four. Sometimes another plugin's Ajax hooks or JavaScript can interfere with your request.

Go through these steps one by one, and I bet you'll track down the issue. Let me know if you hit any snags along the way!

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