Jquery 我在自定义 WordPress 插件中使用 ajax 时收到错误请求

代码中存在一些错误和错误.

注:由于Stack Overflow是一个讲英语的社区，我已经翻译了大部分内容.

PHP主插件代码:

<?php
/*
Plugin Name: Astral
Plugin URI: https://www.example.com
Description: Plugin description.
Version: 1.0
Author: Your name
Author URI: https://www.yourname.com
*/

// Plugin activation - Create 'dhl_guias' table in database
register_activation_hook(__FILE__, 'astral_plugin_activation');
function astral_plugin_activation() {
    require_once(ABSPATH . 'wp-admin/includes/upgrade.php');

    global $wpdb;
    
    dbDelta("
        CREATE TABLE {$wpdb->prefix}dhl_guias (
        id INT NOT NULL AUTO_INCREMENT,
        nombre VARCHAR(100) NOT NULL,
        direccion VARCHAR(100) NOT NULL,
        PRIMARY KEY (id)
    ) {$wpdb->get_charset_collate()}");
}

// Plugin deactivation
register_deactivation_hook(__FILE__, 'astral_plugin_deactivation');
function astral_plugin_deactivation() {
    // your code
}

// Add a menu in the WordPress admin
add_action('admin_menu', 'astral_create_menu'); 
function astral_create_menu() {
    add_menu_page(
        'Astral',               // Page title
        'Astral Menu',          // Menu title
        'manage_options',       // Capability
        'astral-menu',          // Menu slug
        'astral_menu_callback', // The function to be called for content output
        'dashicons-admin-generic', // Icon
        1                       // Position in the Admin menu order
    );
}

// Function called by the menu
function astral_menu_callback() {
    // Code to display the content (calling an external file)
    include plugin_dir_path(__FILE__) . 'astral_visual.php';
}

// Register JavaScript external files
add_action( 'admin_enqueue_scripts', 'my_enqueue' );
function my_enqueue( $hook ) {
   if ( 'toplevel_page_astral-menu' !== $hook ) {
      return;
   }

    wp_enqueue_script( 'astral-ajax-script', 
        plugins_url( 'js/astral.js', FILE ), 
        array( 'jquery' ),'1.0.0', true ); 

   wp_localize_script(
      'astral-ajax-script',
      'astral_params',
      array(
         'ajax_url' => admin_url( 'admin-ajax.php' ),
         'nonce'    => wp_create_nonce( 'astral_nonce' )
      )
   );
}

add_action('wp_ajax_astral_save_form', 'astral_save_form');
function astral_save_form() {
    // Check the Ajax request to prevent external insecure requests
    check_ajax_referer('astral_nonce', 'security'); 

    global $wpdb;

    if( isset($_REQUEST['form_data'])) {
        $data = array(); // initializing
        parse_str($_REQUEST['form_data'], $data);  

        if( isset($data['fullname'])  && isset($data['address'])
        && ! empty($data['fullname']) && ! empty($data['address']) ) {

            // Inserting the some data in the database
            $wpdb->insert( "{$wpdb->prefix}dhl_guias",  array(
                'id' => NULL,
                'nombre' => sanitize_text_field($data['fullname']),
                'direccion' => sanitize_text_field($data['address'])
            ) );
            echo "Success! The data has been saved to the database";
        } else {
            echo "Warning: Some form fields have not been filled";
        }
    } else {
        echo "Warning: The form data has not ben sent";
    }
    wp_die(); // End silently (mandatory)
}

HTML表单(添加到Asteral_Visual.php外部文件):

<form id="dhl-guias" method="POST">
    <label for="fullname">Nombre completo:</label><br>
    <input type="text" id="fullname" name="fullname" placeholder="Agrega tu nombre completo aquí" /><br>
    <label for="address">Dirección:</label><br>
    <input type="text" id="address" name="address" placeholder="Añade tu dirección aquí" /><br><br>
    <button type="submit" id="save" name="save">Guardar</button><br>
    <p class="message"></p>
</form>

JQuery/JAVASCRIPT ASTAL.js外部文件

jQuery( function($) {
    // check that the localized variable astral_params is defined
    if (typeof astral_params !== 'undefined') {
        console.log(astral_params);
        
        // On submitting the form event
        $('form#dhl-guias').on('submit', function(e) {
            e.preventDefault(); // Stop default form post action
            
            // Serializing form data
            var formData =  $(this).serialize()

            // Sending the post request via Ajax
            $.ajax({
                type: "POST",
                url: astral_params.ajax_url,
                datatype: 'json',
                data: { 
                    'action': 'astral_save_form',
                    'form_data': formData,
                    'security': astral_params.nonce
                },
                beforesend: function( xhr ){
                    console.log("beforesend");
                    console.log(xhr);                    
                },
                success: function(response) {
                    $('form p.message').html(response); // add a message

                    console.log("success");
                    console.log(response);
                },
                error: function(xhr, status, error) {
                    console.log("error");
                    console.log(xhr);
                    console.log(error);
                }
            });
        });
    } else {
        console.log('"astral_params" is not defined');
    }
});

经过测试，效果良好.填写表单后，将在数据库表中添加一个条目.