Крючок AJAX в WordPress

Я вникал в мир Javascript и AJAX. Я супер близок, но по какой-то причине я не думаю, что правильно подключаюсь к функциям wordpress ajax. Я налил через документы и это, и думаю, что там 99%.

Это то, что делает это приложение, есть список элементов. Каждый с кнопкой +. При нажатии кнопки появляется окно подтверждения, и если подтверждается, он получает необходимые данные для перехода на php. PHP добавляет элемент в mysql с помощью wpdb-> insert. Он также делает некоторые изменения, если вы покупаете.

Js работает вплоть до вызова, захватывает правильные значения и т. Д. Тестирование php отдельно работает, если я жестко кодирую значения, которые предполагается захватить из POST. Поэтому я ЗНАЮ, что обе части работают, я просто не могу заставить js правильно называть ajax api. Может кто-нибудь, пожалуйста, взгляните на это и дайте мне знать, как связать их вместе, так что вызов ajax фактически запускает php?

Вот код.

<?php add_action( 'admin_footer', 'addItemAJAX_javascript' ); function addItemAJAX_javascript() { $adminAJAX = admin_url('admin-ajax.php'); ?> <script type="text/javascript" language="JavaScript"> $(function() { $( "input[name=btnAddItem]" ) .button() .click(function( event ) { event.preventDefault(); var confirmAction = confirm('Are you sure you want to add this item to your character?'); if (confirmAction==true) { // build data for AJAX call var cID = $('#hdnCharID').val(); cID = cID*1; var charMoney = $('#hdnCharMoney').val(); var thisValue = $(this).val(); var iID = $(this).prev('input[id="hdnItemID"]').val() iID = iID*1; //Add or Buy Item if (thisValue != "+") { var buy = 1; } else { var buy = 0; } var ajaxurl = <?php echo json_encode($adminAJAX); ?>; console.log('cID = ' + cID); console.log('charMoney = ' + charMoney); console.log('thisValue = ' + thisValue); console.log('iID = ' + iID); console.log('buy = ' + buy); console.log('ajaxurl = ' + ajaxurl); var data = { action: 'addItemAJAX', charID: cID, itemID: iID, buyItem: buy }; console.log('data = ' + data); console.log(data); //WP ajax call $.post(ajaxurl, data, function(response) { alert('Got this from the server: ' + response); }); } else { console.log('add item aborted'); } }); }); </script> <?php }; addItemAJAX_javascript(); // PHP SIDE OF AJAX - Handeling Request //// AJAX PROCESSING ///////////////////////////////// add_action('wp_ajax_addItemAJAX', 'addItemAJAX_callback'); function addItemAJAX_callback() { global $wpdb; $charID = intval($_POST['charID']); $itemID = intval($_POST['itemID']); $buyItem = intval($_POST['buyItem']); // //get item details $getItemDetailsSQL = " Select fyxt_wp_db_fatcow.fyxt_items.idfyxt_items, fyxt_wp_db_fatcow.fyxt_items.fyxt_item_name, fyxt_wp_db_fatcow.fyxt_items.fyxt_item_description, fyxt_wp_db_fatcow.fyxt_items.fyxt_item_cost, fyxt_wp_db_fatcow.fyxt_items.fyxt_item_weight From fyxt_wp_db_fatcow.fyxt_items Where fyxt_wp_db_fatcow.fyxt_items.idfyxt_items = $itemID"; $getItemDetailsResults = $wpdb->get_row($getItemDetailsSQL); $iID = $getItemDetailsResults->idfyxt_items; $iName = $getItemDetailsResults->fyxt_item_name; $iDesc = $getItemDetailsResults->fyxt_item_description; $iCost = $getItemDetailsResults->fyxt_item_cost; $iWeight = $getItemDetailsResults->fyxt_item_weight; $charItemTable = fyxt_char_items; $wpdb->insert( $charItemTable, array ( idfyxt_item => $iID, idfyxt_character => $charID, item_name => $iName, item_desc => $iDesc, item_cost => $iCost, item_weight => $iWeight, item_quant => 1, equip => 0, carried => 1 ) ); $wpdb->print_error(); $newItemAdded = $wpdb->insert_id; //remove cash if item is bought if ($buyItem == 1 ) { $curCharMoneySQL = "Select fyxt_wp_db_fatcow.fyxt_characters.char_money From fyxt_wp_db_fatcow.fyxt_characters Where fyxt_wp_db_fatcow.fyxt_characters.idfyxt_character = $charID"; $curCharCash = $wpdb->get_var($curCharMoneySQL); $wpdb->print_error(); $newCash = $curCharCash - $iCost; $changeCashSQL = " UPDATE fyxt_characters SET char_money = $newCash WHERE idfyxt_character = $charID"; $changeCash = $wpdb->query($changeCashSQL); $wpdb->print_error(); } $debugArray = Array(); array_push($debugArray,$charID, $itemID, $buyItem, $getItemDetailsSQL, $getItemDetailsResults,$newItemAdded, $newCash); echo $debugArray ; die(); } ?>

Я уверен, что это 1 (или 2) из 2 вещей. Я не уверен, что я подключу эти функции к WordPress правильно. Или могут возникнуть проблемы с вложенными функциями, которые у меня есть для кнопки jQuery. Я сомневаюсь, что это номер 2, хотя, похоже, он работает … Я просто получаю обратно с сервера без какой-либо активности базы данных. Вот что говорит журнал.

 cID = 112 ?charID=112:538 charMoney = 9990 ?charID=112:539 thisValue = + ?charID=112:540 iID = 664 ?charID=112:541 buy = 0 ?charID=112:542 ajaxurl = http://localhost/nnnnnnnn.com/wp-admin/admin-ajax.php ?charID=112:543 data = [object Object] ?charID=112:550 Object {action: "addItemAJAX", charID: 112, itemID: 664, buyItem: 0} ?charID=112:551 XHR finished loading: "http://localhost/nnnnnnnn.com/wp-admin/admin-ajax.php". jquery-1.9.1.js:8526 send jquery-1.9.1.js:8526 jQuery.extend.ajax jquery-1.9.1.js:7978 jQuery.(anonymous function) jquery-1.9.1.js:7614 (anonymous function) ?charID=112:554 jQuery.event.dispatch jquery-1.9.1.js:3074 elemData.handle

Большое вам спасибо за помощь и предложения!

Прежде всего, вам нужно правильно добавить крючки

 // For the users that are not logged in add_action( 'wp_ajax_nopriv_addItemAJAX', 'addItemAJAX_callback' ); // For the users that are logged in: add_action( 'wp_ajax_addItemAJAX', 'addItemAJAX_callback' ); // ajax handler function addItemAJAX_callback() { // code goes here // since $debugArray is an array, so die(json_encode($debugArray)); // last line }

Один крючок будет работать, когда пользователь войдет в систему, а другой будет работать, когда пользователь не войдет в систему (для любого пользователя). Если вы делаете запрос ajax для зарегистрированных пользователей, тогда wp_ajax_nopriv_ hook.

Сохраните код js/ajax в отдельном файле в yourthemefolder/js/myAjaxScript.js а также сохраните следующий код в файле functions.php

 add_action('wp_enqueue_scripts', 'my_load_scripts'); function my_load_scripts() { // for pluggin, you may use "plugin_dir_url( __FILE__ )" wp_enqueue_script( 'my_ajax-script', get_stylesheet_directory_uri() . '/js/myAjaxScript.js', array('jquery') ); // Following code will let you use "ajaxObj.ajax_url" to get the // ajax url (admin-ajax.php) in your my_ajax_scriptjs file wp_localize_script( 'my_ajax-script', 'ajaxObj', array( 'ajax_url' => admin_url( 'admin-ajax.php' ) )); }

В файле my_ajax_script.js вы можете сделать код следующим образом:

 var data = { action: 'addItemAJAX_callback', // ... }; $.getJson(ajaxObj.ajax_url, data, function(response) { // response is an object // ... });

Алос помнит, что при использовании ajax с панели администратора вам не нужно использовать wp_localize_script , так как 2.8 ajaxurl всегда определяется в заголовке admin и указывает на admin-ajax.php .

Я не буду проходить через ваш код, так как кажется, что его трудно реплицировать (см. SSCCE по этому вопросу). Но я расскажу, как работать с Ajax и WordPress (от использования AJAX в коротком коде WordPress? ):

1) Запустите и локализуйте файл JavaScript.

Вместо того, чтобы ставить в очередь, мы могли печатать непосредственно в верхнем или нижнем колонтитуле, но это не очень хорошая практика. И локализация передаст значения PHP в JS в чистом виде.
Я предполагаю, что вы работаете с темой, иначе измените get_stylesheet_directory_uri() на plugins_url() .

 add_action( 'wp_enqueue_scripts', 'enqueue_so_19721859' ); function enqueue_so_19721859() { # jQuery will be loaded as a dependency ## DO NOT use other version than the one bundled with WP ### Things will BREAK if you do so wp_enqueue_script( 'my-handler', get_stylesheet_directory_uri() . '/js/ajax.js', array( 'jquery' ) ); # Here we send PHP values to JS wp_localize_script( 'my-handler', 'my_handler', array( 'ajaxurl' => admin_url( 'admin-ajax.php' ), 'ajaxnonce' => wp_create_nonce( 'my_ajax_validation' ) // <--- Security! ) ); }

2) Ajax для зарегистрированных и не зарегистрированных пользователей

Вы должны добавить публичный обратный вызов Ajax тоже с no_priv_ :

 add_action('wp_ajax_addItemAJAX', 'addItemAJAX_callback'); add_action('wp_ajax_no_priv_addItemAJAX', 'addItemAJAX_callback');

3) Обратный звонок и ответ Ajax

Обратный вызов Ajax имеет проверки безопасности и использует wp_send_json_* для обработки ответа:

 function addItemAJAX_callback() { check_ajax_referer( 'my_ajax_validation', 'security' ); $my_thing = something(); if( !$my_thing ) wp_send_json_error( array( 'error' => __( 'Could not retrieve a post.' ) ) ); else wp_send_json_success( $my_thing ); }

4) Наконец, сценарий

Очень важно обернуть все jQuery в режиме noConflict .
Вы можете передать любую информацию, которая вам нужна, через локализованный объект my_handler . Мы проверяем 3 вещи из ответа:

общий сбой: не удалось достичь обратного вызова или не прошло безопасности
частичный сбой: обратный вызов был достигнут, но вернулся json_error
успех: продолжайте свою работу

 jQuery( document ).ready( function( $ ) { var data = { action: 'addItemAJAX_callback', security: my_handler.ajaxnonce }; $( '#my-submit' ).click( function(e) { e.preventDefault(); $.post( my_handler.ajaxurl, data, function( response ) { // ERROR HANDLING if( !response.success ) { // No data came back, maybe a security error if( !response.data ) $( '#my-answer' ).html( 'AJAX ERROR: no response' ); else $( '#my-answer' ).html( response.data.error ); } else $( '#my-answer' ).html( response.data ); } ); }); });