Блог

У меня возникли проблемы с запуском моего Ajax-вызова при изменении <select> параметра.

JS:

 function sendAjax() {
    console.log('function launched');
    jQuery.ajax({
      type: "POST", // use $_POST request to submit data
      url: john_cena_ajax_data.url, // URL to "wp-admin/admin-ajax.php"
      data: {
        action: 'john_cena', // wp_ajax_*, wp_ajax_nopriv_*
        nonce_ajax: john_cena_ajax_data.nonce,
        nonce_data: jQuery('#john-cena').data('nonce'),
        first_name: 'John', // PHP: $_POST['first_name']
        last_name: 'Cena'     // PHP: $_POST['last_name']
      },
      success: function (data) {
        jQuery('#john-cena').html(data);
      },
      error: function () {
        console.log(errorThrown); // error
      }
    });
  }
    
  
  

PHP:

 add_action( 'wp_ajax_john_cena',        'acn_john_cena_ajax_callback' );
add_action( 'wp_ajax_nopriv_john_cena', 'acn_john_cena_ajax_callback' );  

function acn_john_cena_ajax_callback(){

    /* Check DOM nonce */
    check_ajax_referer( 'john-cena-shortcode', 'nonce_data' );

    /* Check Localize Script Nonce */
    check_ajax_referer( 'john-cena-script-nonce', 'nonce_ajax' );

    /* Get request */
    $first_name = isset( $_POST['first_name'] ) ? $_POST['first_name'] : 'N/A';
    $last_name = isset( $_POST['last_name'] ) ? $_POST['last_name'] : 'N/A';
        
    ?>
    <p>Hello. Your first name is <?php echo strip_tags( $first_name ); ?>.</p>
    <p>And your last name is <?php echo strip_tags( $last_name ); ?>.</p>
    <?php
    wp_die(); // required. to end AJAX request.
}     

  

Форма доставляется этим PHP:

 function acn_john_cena_shortcode_callback(){

    /* Enqueue JS only if this shortcode loaded. */
    wp_enqueue_script( 'my-john-cena-script' );

    /* Create Nonce */
    $nonce = wp_create_nonce( 'john-cena-shortcode' );

        $content = "<div id="john-cena" data-nonce="' . esc_attr( $nonce ) . '"></div>";

        $content .= "<label for="cfg">Configuration</label>";
        $content .= "<select id="cfg" name="cfg" onchange="sendAjax()">";
        $content .= "<option selected>1</option>";
        $content .= "<option>2</option>";
        $content .= "<option>3</option>";
        $content .= "<option>4</option>";
        $content .= "<option>5</option>";
        $content .= "<option>6</option>";
        $content .= "<option>7</option>";
        $content .= "<option>8</option>";
        $content .= "<option>9</option>";
        $content .= "<option>10</option>";
        $content .= "</select>";

        $content .= "<button id="btn" onclick="javascript:sendAjax();">Send Data</button>";

    return $content;
}
  

Когда я просматриваю страницу в своем браузере, консоль сообщает «функция запущена», как и должно быть, но затем я получаю ответ XHR Error 403 Forbidden.

СООБЩЕНИЕ https://devphp.de/wordpress/wp-admin/admin-ajax.php [HTTP/2 403 Запрещенных 452 мс]

Я попытался поискать в Google и проверить наличие .htaccess, но в моих папках WordPress его нет. Я также отключил плагины кэша и все другие плагины. Даже если это единственный работающий плагин, я получаю сообщение об ошибке.

Я извлек его из этого руководства: https://shellcreeper.com/how-to-secure-wordpress-ajax-using-nonce / Github: https://github.com/turtlepod/wp-ajax-noob/tree/p2-security-nonce

Я только изменил вызов ajax на функцию onchange и некоторые имена функций, но я получаю эту ошибку 403.

Я не знаю, что делать, вы можете помочь?

Вы должны попытаться упростить свой вопрос. Используйте свою консоль javascript и проверьте, выполняются ли запросы и каков ответ. Обратитесь к официальной документации: https://codex.wordpress.org/AJAX_in_Plugins Также на udemy есть хорошие курсы WordPress — Ajax.