在WooCommerce结帐页面上,我想通过AJAX将数据提交到数据库,然后在保存数据后隐藏表单。然后,客户将照常填写其余表格。
从到目前为止的发现来看,我在数据收集表单上的提交似乎正在触发wc-ajax=checkout
。提交并隐藏此初始表单后,我只想这样做。
请到目前为止我已经测试过。
HTML
<form class="test1-form" name="group" method="post" action="<?php echo admin_url( 'admin-ajax.php' ); ?>">
<label for="test1">test1</label>
<span class="hint">hint</span>
<input type="text" class="input-text" name="test1" id="test1">
<input type="hidden" name="action" value="custom_action">
<label for="test2">test2</label>
<span class="hint">hint</span>
<input type="text" class="input-text" name="test2" id="test2">
<input type="submit" class="button alt" name="testing" id="place_order" value="Submit" data-value="submit" />
</form>
jQuery
jQuery('.testing-form').on('submit', function(e) {
e.preventDefault();
var $form = jQuery(this);
jQuery.post($form.attr('action'), $form.serialize(), function(data) {
alert('This is data returned from the server ' + data);
}, 'json');
});
PHP
add_action( 'wp_ajax_custom_action', 'test_action' );
add_action( 'wp_ajax_nopriv_custom_action', 'test_action' );
function test_action() {
$response = array(
'error' => false,
);
if (trim($_POST['test1']) == '') {
$response['error'] = true;
$response['error_message'] = 'Email is required';
// Exit here, for not processing further because of the error
exit(json_encode($response));
}
exit(json_encode($response));
}
由于这导致调用WooCommerce AJAX,因此我使结帐脚本出队。然后,在调用我的AJAX之后,我重新加入了结帐脚本,因此可以正常处理结帐表格。
由于我对AJAX的使用经验不足,尤其是WooCommerce处理它的方式,我对这种方法是否有效以及如何实现期望的结果感到困惑。