WooCommerce追踪订单提交AJAX

Question

我是这个Ajax的新手。

我想要做的是提交订单跟踪表格&用AJAX显示结果。所以，我想阿贾克斯显示DIV track_result

结果的问题是下面的代码工作正常，但跟踪结果显示为整个新页面（与头，容器&页脚）DIV track_result内。

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

这里是WooCommerce形式，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

问题是你是从网址，您需要获取不完整的数据。

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)); ?>此页面，

检查，如果呼叫来自阿贾克斯，如果是不负载页眉和页脚。只加载需要的视图

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