如何实现WordPress quick-interest-slider表单无刷新提交？

Hey there! Let’s work through this form refresh issue together—since you’re dealing with a pre-built WordPress form and don’t have deep PHP/WP experience, I’ll keep this straightforward and actionable.

1. First, Fix the JavaScript to Stop Page Refresh #

The most common reason your form still refreshes is that you didn’t explicitly block the browser’s default submit behavior. Update your jQuery code to include e.preventDefault() at the start of the submit handler, and structure the Ajax request properly for WordPress:

$('.qis-form').on('submit', function(e) {
    // Stop the browser from reloading the page
    e.preventDefault();

    // Grab all form data in a URL-friendly format
    const formData = $(this).serialize();

    // Send the data via Ajax
    $.ajax({
        url: ajax_object.ajax_url, // We'll set this up in PHP next
        type: 'POST',
        data: {
            action: 'qis_process_form_ajax', // Custom action name for WordPress to hook into
            form_data: formData
        },
        success: function(response) {
            // Handle success/feedback to the user
            if (response.success) {
                alert('Form submitted successfully!');
                $('.qis-form')[0].reset(); // Reset the form if needed
            } else {
                alert('Oops: ' + response.data); // Show validation/processing errors
            }
        },
        error: function(xhr, status, error) {
            console.error('Ajax Error:', error); // Check console for details
            alert('Something went wrong—please try again.');
        }
    });
});

2. Hook Your Existing PHP Functions to WordPress Ajax #

WordPress has its own Ajax system, so you can’t call qis_process_form directly from the front end. Instead, we’ll register a custom Ajax action that wraps your existing validation/processing functions. Add this to your theme’s functions.php file:

// Register Ajax handler for both logged-in and guest users
add_action('wp_ajax_qis_process_form_ajax', 'qis_ajax_form_handler');
add_action('wp_ajax_nopriv_qis_process_form_ajax', 'qis_ajax_form_handler');

function qis_ajax_form_handler() {
    // Make sure we received form data
    if (!isset($_POST['form_data'])) {
        wp_send_json_error('No form data received.');
    }

    // Convert the serialized form data into a usable array
    parse_str($_POST['form_data'], $formFields);

    // First run validation using qis_loop
    $validation = qis_loop($formFields);
    if ($validation !== true) {
        // If validation fails, send back the error message
        wp_send_json_error($validation);
    }

    // If validation passes, process the form and send emails
    $processingSuccess = qis_process_form($formFields);
    if ($processingSuccess) {
        wp_send_json_success('Form processed successfully!');
    } else {
        wp_send_json_error('Failed to process your submission.');
    }

    // Required: End the Ajax request properly
    wp_die();
}

3. Pass the WordPress Ajax URL to Your Front-End #

WordPress needs to tell your JavaScript where to send the Ajax request. Add this to functions.php to pass the official Ajax URL to your script:

add_action('wp_enqueue_scripts', 'qis_enqueue_ajax_script');

function qis_enqueue_ajax_script() {
    // Enqueue your custom JS file (update the path to match your setup)
    wp_enqueue_script(
        'qis-ajax',
        get_template_directory_uri() . '/js/qis-ajax.js',
        array('jquery'), // Ensure jQuery loads first
        '1.0',
        true // Load script in the footer
    );

    // Pass the Ajax URL to your JS
    wp_localize_script('qis-ajax', 'ajax_object', array(
        'ajax_url' => admin_url('admin-ajax.php')
    ));
}

4. Add Security (Optional but Highly Recommended) #

To protect against spam or malicious requests, add a nonce field to your form and validate it in the Ajax handler:

1. Add this hidden field inside your .qis-form HTML:

<input type="hidden" name="qis_nonce" value="<?php echo wp_create_nonce('qis_form_security'); ?>">

2. Update the qis_ajax_form_handler function to validate the nonce:

// Add this right after parsing form data
if (!wp_verify_nonce($formFields['qis_nonce'], 'qis_form_security')) {
    wp_send_json_error('Security check failed.');
}

5. Debugging Tips if It’s Still Not Working #

• Open your browser’s developer tools (F12) → Console tab: Check for JavaScript errors (e.g., jQuery not loading, typos in variable names).
• Check the Network tab: Look for the Ajax request to admin-ajax.php—if it returns a 404, double-check your action name matches in JS and PHP.
• Check your WordPress error logs: If qis_loop or qis_process_form are throwing PHP errors, they’ll show up here (usually in wp-content/debug.log if debugging is enabled).

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