javascript - 在产品页面自定义字段中检索产品自定义字段值
问题描述
我有的 ?
显示在将商品添加到购物车之前要填写的海关字段的单个产品页面。我添加了一个按钮,该按钮应将自定义字段中的所有值放在一个文本文件中,并在不重新加载页面的情况下保存它。
我的代码是什么?
在 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);
}
?>
解决方案
目前,您没有向您的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
以便在前端对其进行检查。将此添加到 PHPajax_order_callback_wp
函数的末尾。
wp_send_json_success( $data );
这就是你$.post
在 JavaScript 中的函数。
$.post(<?php echo admin_url("admin-ajax.php"); ?>, data, function(response) {
console.log(response);
});
推荐阅读
- ios - 更改导航栏背景颜色后,self.view 的 y 位置发生更改
- xaml - 如何向我的 xaml 2017 VS 程序添加图标
- java - 如何在mig布局中进行组件定位
- webpack - 仅使用标志运行 Webpack 插件
- c - 关于数据结构的建议
- printing - 打印 itext 7 pdf 文档(最好通过 system.drawing.printing)
- typescript - Typescript:使用联合类型和三元运算符进行类型推断
- kubernetes - Kubernetes DNS 使用 systemd resolvd 的理想设置
- html - 如何在视频背景上覆盖导航栏
- charts - chartjs默认背景颜色到列