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

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);
});