更新: 问题已解决!AJAX可以工作,但是我具有debug_to_console测试echo控制台日志中的功能。这是函数:
debug_to_console
echo
/* This is a function to print data to web browser console ** ** Use debug_to_console( $data ); to print */ function debug_to_console( $data ) { $output = $data; if ( is_array( $output ) ) $output = implode( ',', $output); echo "<script>console.log( 'Debug Objects: " . $output . "' );</script>"; }
在WooCommerce的管理订单页面(WooCommerce>订单>编辑)上,我添加了自定义字段,以向该订单添加自定义费用。我正在关注这篇文章以添加AJAX,但是它无法正常工作。我成功注册并排队了我的jQuery脚本,add-custom- fee.js并且在大多数情况下都有效,但是我完全没有收到响应。
add-custom- fee.js
在管理订单页面上,我在自定义字段下方添加了以下链接以触发AJAX:
$nonce = wp_create_nonce('add_custom_fee_nonce'); $link = admin_url('admin_ajax.php?action=add_custom_fee&post_id=' . $order->id . '&nonce=' . $nonce ); echo '<a class="add-custom-fee" data-nonce="' . $nonce . '" data-post_id="' . $order->id . '" href="' . $link . '">Add fee?</a>';
这是我注册和排队脚本的方式:
add_action('admin_enqueue_scripts', 'load_add_custom_fee_ajax_js'); function load_add_custom_fee_ajax_js( $hook ) { // Deprecated; append datetime as version number of script //$my_js_ver = date("ymd-Gis", filemtime( plugin_dir_path( __FILE__ ) . 'js/add-custom-fee.js' )); // Only register and enqueue on order edit page if ( 'post.php' == $hook || 'edit.php' == $hook ) { global $post; if ('shop_order' === $post->post_type) { wp_register_script( 'add-custom-fee', get_stylesheet_directory_uri() . '/js/add-custom-fee.js', array('jquery'), 1.0, true ); // enqueue the JavaScript file wp_enqueue_script( 'jquery' ); wp_enqueue_script( 'add-custom-fee'); // localize the script to reference admin-ajax URL wp_localize_script( 'add-custom-fee', 'myAjax', array( 'ajaxurl' => admin_url('admin-ajax.php') ) ); } } }
这是我的jQuery脚本:
jQuery(document).ready(function () { console.log("Hello world! Add custom fee JS script enqueued!"); }); /* START of code to add a custom fee to the order in admin and recalculate */ jQuery(document).ready(function ($) { $('.add-custom-fee').click( function(e) { e.preventDefault(); console.log("Add fee toggle change detected! Grabbing values..."); // var ajaxurl = 'https://staging1.orderpantry.com/wp-admin/admin-ajax.php'; var add_fee_toggle = $("input[name='add_fee_toggle']:checked").val(); var add_fee_name = $("input[name='add_fee_name']").val(); var add_fee_percentage = $("input[name='add_fee_percentage']").val(); console.log("Toggle? " + add_fee_toggle + ". Fee name: " + add_fee_name + ". Fee percentage: " + add_fee_percentage + "%"); // Remove cookie and do not apply fee if (add_fee_toggle == '') { // Clear the fee fields $("input[name='add_fee_toggle'][value='']").prop('checked', true); $("#add_fee_name").val(''); $("#add_fee_percentage").val(''); console.log('Fee not added!'); $('button.calculate-action').trigger('click'); // <-- trigger recalculate order //$('button.save-action').trigger('click'); <-- trigger saving order } else { order_id = $(this).attr('data-post_id'); nonce = $(this).attr('data-nonce'); console.log("This order's ID is " + order_id + " and its nonce is " + nonce); // Push fee values to AJAX function $.ajax({ type: 'post', dataType: 'json', url: myAjax.ajaxurl, data: { action: 'create_fee_object', order_id: order_id, nonce: nonce, add_fee_toggle: add_fee_toggle, add_fee_name: add_fee_name, add_fee_percentage: add_fee_percentage }, success: function(response) { if ( response.type == 'success' ) { console.log('Success! AJAX request received!'); // Trigger the order to recalculate on success $('button.calculate-action').trigger('click'); } else { alert('An error has occurred while adding your fee.'); $('button.calculate-action').trigger('click'); } } }); } }); });
我没有收到任何回应,成功或失败。该代码似乎只是在这里停止工作。
这是我的PHP代码:
add_action('wp_ajax_create_fee_object', 'create_fee_object'); add_action('wp_ajax_nopriv_create_fee_object', 'please_login'); function create_fee_object() { if ( !wp_verify_nonce( $_REQUEST['nonce'], 'add_custom_fee_nonce' ) ) { exit("Unsecured access detected!"); } debug_to_console( "Add fee data reached AJAX function!" ); // Check if action was fired via Ajax call. If yes, JS code will be triggered, else the user is redirected to the post page if(!empty($_SERVER['HTTP_X_REQUESTED_WITH']) && strtolower($_SERVER['HTTP_X_REQUESTED_WITH']) == 'xmlhttprequest') { $result['type'] = 'success'; $result = json_encode($result); echo $result; } else { header("Location: ".$_SERVER["HTTP_REFERER"]); } die(); } function please_login() { alert("You must log in to do this."); die(); }
我认为该功能无法正常create_fee_object工作或AJAX POST无法达到该功能。
create_fee_object
知道是什么原因导致它无法正常工作吗?谢谢!
答案: 删除debug_to_console( "Add fee data reached AJAX function!" );。
debug_to_console( "Add fee data reached AJAX function!" );
假设您从此[O帖子复制了debug_to_console,那么您将<script>在预期的响应内容上方打印标签,因此,不仅您不会在回调中看到预期的数据,而且success回调也 不会 触发。为什么?因为您已经告诉$.ajax我们期望JSON(通过dataType: 'json'),但是jQuery在尝试将您返回的内容解析为JSON时抛出错误。
<script>
success
$.ajax
dataType: 'json'