Ajax表单提交给Wordpress

Question

所以，这是我的代码：

form-checkout.php

<form id="rh_checkout_ajax" name="checkout" method="post" class="checkout woocommerce-checkout"  enctype="multipart/form-data">

<?php if ( sizeof( $checkout->checkout_fields ) > 0 ) : ?>

    <?php do_action( 'woocommerce_checkout_before_customer_details' ); ?>

    <div class="col2-set" id="customer_details">
        <div class="col-1">
            <?php do_action( 'woocommerce_checkout_billing' ); ?>
        </div>

        <div class="col-2">
            <?php do_action( 'woocommerce_checkout_shipping' ); ?>
        </div>
    </div>

    <?php do_action( 'woocommerce_checkout_after_customer_details' ); ?>


<?php endif; ?>

<?php do_action( 'woocommerce_checkout_before_order_review' ); ?>

<div id="order_review" class="woocommerce-checkout-review-order">
    <?php do_action( 'woocommerce_checkout_order_review' ); ?>
</div>

<?php do_action( 'woocommerce_checkout_after_order_review' ); ?>

<input value="send" type="submit" name="buy_product" style="display:none;" id="rh_product_add_done_click"></input>
</form>

my_js.js

//Ajax checkout submit
jQuery('#rh_checkout_ajax').submit(function(e){

var name = jQuery(this).attr('name'); 

jQuery.ajax({ 
     data: {action: 'contact_form', name:name},
     type: 'post',
     url: ajaxurl,
     success: function(data) {
          alert(data); 

    }
});

});

functions.php

//Ajax submit callback
add_action('wp_ajax_contact_form', 'contact_form');
add_action('wp_ajax_nopriv_contact_form', 'contact_form');

function contact_form()
{
   echo $_POST['name'];    
}

通常会发生什么

因此，当购买产品时，用户将被重定向到显示他/她刚刚购买的商品order-detail页面。

我希望它发生：

我正在尝试使其通过Ajax提交表单，并且不会将用户重定向到订单详细信息页面，而是停留在产品页面中（因此，不刷新也不重定向）。

我试图如上所述通过ajax提交表单，但是运气不高。

有人可以帮我这个忙吗？

谢谢！

Answer 1

您必须阻止表单正常提交。 在您的js文件中，添加e.preventDefault() 。 像这样：

jQuery('#rh_checkout_ajax').submit(function(e){
    e.preventDefault();
    var name = jQuery(this).attr('name'); 

    jQuery.ajax({ 
         data: {action: 'contact_form', name:name},
         type: 'post',
         url: ajaxurl,
         success: function(data) {
             alert(data); 

        }
    });

});