WordPress中AJAX请求报400 Bad Request错误求助

Hey there! Let's work through your WordPress AJAX issues step by step—starting with the jQuery inclusion problem (since that’s a super common source of conflicts) and then diving into troubleshooting the AJAX errors.

First off, adding jQuery via a direct <script src> link in your HTML is risky—WordPress comes with its own bundled jQuery, and loading a separate version can cause conflicts (like $ is not defined errors or broken functionality). The correct approach is to use wp_enqueue_scripts to load WordPress’s jQuery and your custom script properly.

Add this to your theme’s functions.php file:

function my_custom_scripts() {
    // Enqueue WordPress's built-in jQuery
    wp_enqueue_script('jquery');
    
    // Enqueue your custom AJAX script (update the path to match your file location)
    wp_enqueue_script(
        'my-ajax-script',
        get_template_directory_uri() . '/js/ajax-script.js',
        array('jquery'), // Ensures jQuery loads before your script
        '1.0',
        true // Loads the script in the footer for better performance
    );
    
    // Pass critical AJAX data to the frontend (this is essential!)
    wp_localize_script(
        'my-ajax-script',
        'wpAjax', // This object will be available in your JS
        array(
            'ajaxUrl' => admin_url('admin-ajax.php'),
            'nonce' => wp_create_nonce('wp-ajax-nonce') // Security nonce
        )
    );
}
add_action('wp_enqueue_scripts', 'my_custom_scripts');

Then remove the direct jQuery <script> tag from your HTML—WordPress will handle loading it correctly now.

Let’s cover the most common issues that cause console errors with WordPress AJAX:

a. Use the Localized AJAX URL & Nonce #

Your frontend jQuery code needs to use the ajaxUrl and nonce we passed via wp_localize_script—these are required for WordPress to recognize and validate your AJAX request. Here’s a working example:

jQuery(document).ready(function($) {
    // Example: Trigger AJAX on a button click
    $('#submit-btn').on('click', function(e) {
        e.preventDefault();
        
        $.ajax({
            url: wpAjax.ajaxUrl,
            type: 'POST',
            data: {
                action: 'my_custom_ajax_action', // Matches the PHP hook name
                nonce: wpAjax.nonce,
                // Add your custom data here (e.g., form inputs)
                userInput: $('#my-input').val()
            },
            success: function(response) {
                console.log('AJAX Success:', response);
                // Handle the response (e.g., update the DOM)
            },
            error: function(xhr, status, error) {
                console.error('AJAX Error:', error);
                console.log('Full XHR Response:', xhr.responseText); // This will show detailed WP error messages
            }
        });
    });
});

Note: We wrap the code in jQuery(document).ready(function($) { ... }) so we can use $ safely (since WordPress runs jQuery in noConflict mode by default).

b. Validate Your PHP AJAX Handler #

Your functions.php AJAX handler needs to hook into the correct WordPress actions—one for logged-in users, one for guests. Here’s how to set it up:

// Hook for logged-in users
add_action('wp_ajax_my_custom_ajax_action', 'my_ajax_handler');
// Hook for non-logged-in users
add_action('wp_ajax_nopriv_my_custom_ajax_action', 'my_ajax_handler');

function my_ajax_handler() {
    // First, verify the security nonce to prevent CSRF attacks
    if (!wp_verify_nonce($_POST['nonce'], 'wp-ajax-nonce')) {
        wp_send_json_error('Invalid security token');
    }
    
    // Process your data here (sanitize inputs first!)
    $user_input = sanitize_text_field($_POST['userInput'] ?? '');
    
    // Send a success response back to the frontend
    wp_send_json_success("Received input: {$user_input}");
}

Key points:

• The action value in your JS must match the suffix in wp_ajax_{action} and wp_ajax_nopriv_{action}.
• Use wp_send_json_success() or wp_send_json_error() to return properly formatted JSON responses—these functions automatically exit the script, so you don’t need to add die() or exit().

c. Diagnose Console Errors #

Since you mentioned the console points to a specific line, here’s what common errors mean:

• $ is not defined: jQuery isn’t loaded, or you’re using $ without wrapping it in the ready function (as shown above).
• 400 Bad Request: Usually means the nonce is invalid, or the action parameter in your JS doesn’t match the PHP hook.
• 404 Not Found: The ajaxUrl is incorrect—double-check that admin_url('admin-ajax.php') is being passed correctly.
• 500 Internal Server Error: There’s a PHP error in your handler—enable WP_DEBUG in wp-config.php to see the exact issue:

  define('WP_DEBUG', true);
  define('WP_DEBUG_LOG', true);
  

• Make sure your custom JS file path in wp_enqueue_script() is correct (use get_template_directory_uri() for parent themes, get_stylesheet_directory_uri() for child themes).
• Sanitize all user input in your PHP handler to avoid security risks.
• Test both logged-in and logged-out states if your site allows guest users.

If you can share the exact console error message and snippets of your code (the line the console points to, your AJAX handler, etc.), we can narrow this down even further!

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