在产品页面自定义字段中检索产品自定义字段值

Question

我有什么？

显示在将商品添加到购物车之前要填写的海关字段的单个产品页面。我添加了一个按钮，该按钮应将自定义字段中的所有值放在一个文本文件中并保存它而无需重新加载页面。

我的代码是什么？

在 simple.php 中

<input type="submit" id="ajax-order-btn" class="button" value="Place Order via AJAX" />

在functions.php中

<?php
add_action('wp_head', 'ajax_call_place_order');
function ajax_call_place_order() {
    if ( is_product() ){
?>
    <script type="text/javascript" >
        jQuery(document).ready(function($) {
            $(document).on("click", "#ajax-order-btn" ,function(e) {
                e.preventDefault();

                var data = {
                    'action': 'ajax_order',
                };

                $.post('<?php echo esc_url( home_url() ); ?>/wp-admin/admin-ajax.php', data);
            });
        });
    </script>
<?php
    }
}

add_action('wp_ajax_ajax_order', 'ajax_order_callback_wp');
add_action( 'wp_ajax_nopriv_ajax_order', 'ajax_order_callback_wp' );
function ajax_order_callback_wp() {
    $custom_fields_value = ***What Should Go Here***
    file_put_contents(wp_upload_dir()['basedir'].'/orders/AJAX_TEST.txt', $custom_fields_value);
}

?>

Answer 1

目前您没有向您的ajax_order_callback_wp 函数发送任何内容。为此，您必须通过选择表单并提取值来从表单中获取值。

不要监听按钮点击，而是监听表单上的submit 事件。阻止此默认行为将阻止表单重新加载页面。

现在$.post 函数负责向您的后端发送数据，但它目前只获取一个带有'action': 'ajax_order' 的对象。它也需要表单中的数据。

jQuery 有一个名为serialize 的函数，可以在表单元素上调用它来从表单中提取数据。将该表单数据传递给data 对象。现在您的表单数据已包含在内。

jQuery(document).ready(function($) {
  var $form = $('form.cart');

  $form.on("submit" ,function(e) {
    e.preventDefault();

    var data = {
      'action': 'ajax_order',
      'data': $form.serialize()
    };

    $.post(<?php echo admin_url("admin-ajax.php"); ?>, data);
  });
});

在接收端，您现在可以通过读出全局 $_POST 变量来提取值。该变量在每个函数中都可用，如果使用 POST 方法发送了某些内容，则该变量将包含值。在您的情况下，您使用了 jQuery $.post，所以 $_POST 是要走的路。

因为对象上的属性称为data，您需要访问$_POST 数组上的该属性以查看值是什么。

function ajax_order_callback_wp() {
  // If data is there, use it, otherwise use an empty array.
  $data = $_POST[ 'data' ] ?? [];

  file_put_contents(wp_upload_dir()['basedir'] . '/orders/AJAX_TEST.txt', $data );
}

如果您需要知道$data 包含什么，那么您可以将带有$data 内容的响应发送回客户端，以便在前端检查它。将此添加到 PHP ajax_order_callback_wp 函数的末尾。

wp_send_json_success( $data );

这是你在 JavaScript 中的 $.post 函数。

$.post(<?php echo admin_url("admin-ajax.php"); ?>, data, function(response) {
  console.log(response);
});