WooCommerce 跟踪订单提交 AJAX

Question

我是 Ajax 的新手。

我要做的是提交订单跟踪表单并使用 AJAX 显示结果。所以我尝试用ajax在div track_result

中显示结果

问题是下面的代码可以正常工作，但是跟踪结果在 div track_result 中显示为整个新页面（带有页眉、容器和页脚）。

我无法弄清楚在 div 中只显示结果（WooCommerce 类）而不是整个新页面。

这里是 WooCommerce form-tracking.php

<form action="<?php echo esc_url( get_permalink( $post->ID ) ); ?>" method="post" class="track_order">

<p><?php _e( 'To track your order please enter your Order ID in the box below and press the "Track" button. This was given to you on your receipt and in the confirmation email you should have received.', 'woocommerce' ); ?></p>

<p class="form-row form-row-first"><label for="orderid"><?php _e( 'Order ID', 'woocommerce' ); ?></label> <input class="input-text" type="text" name="orderid" id="orderid" placeholder="<?php esc_attr_e( 'Found in your order confirmation email.', 'woocommerce' ); ?>" /></p>
<p class="form-row form-row-last"><label for="order_email"><?php _e( 'Billing Email', 'woocommerce' ); ?></label> <input class="input-text" type="text" name="order_email" id="order_email" placeholder="<?php esc_attr_e( 'Email you used during checkout.', 'woocommerce' ); ?>" /></p>
<div class="clear"></div>


<p class="form-row"><input type="submit" class="button" name="track" value="<?php esc_attr_e( 'Track', 'woocommerce' ); ?>" /></p>
<?php wp_nonce_field( 'woocommerce-order_tracking' ); ?>

jQuery

 $('.track_order').submit(function() { // catch the form's submit event
    $.ajax({ // create an AJAX call...
        data: $(this).serialize(), // get the form data
        type: $(this).attr('method'), // GET or POST
        url: $(this).attr('action'), // the file to call
        success: function(response) { // on success..
            $('.track-results').html(response); // update the DIV
        }
    });
    return false; // cancel original event to prevent form submitting
});

Answer 1

问题是你正在从你不应该的 url 中获取整个数据。

var formData = new FormData();
formData.append('from_ajax', '1');// append this to your form.

 $('.track_order').submit(function() { // catch the form's submit event
    $.ajax({ // create an AJAX call...
        data: formData, // get the form data
        type: $(this).attr('method'), // GET or POST
        url: $(this).attr('action'), // the file to call
        success: function(response) { // on success..
            $('.track-results').html(response); // update the DIV
        }
    });
    return false; // cancel original event to prevent form submitting
});

现在在<?php echo esc_url( get_permalink( $post->ID ) ); ?>这个页面，

检查调用是否来自 ajax，如果是，则不加载页眉和页脚。仅加载所需的视图

if(isset($_POST['from_ajax']){
     if($_POST['from_ajax'] == 1){
         // donot load header or footer , just load required vire to display.
     }
}