WooCommerce отслеживать заказ отправить AJAX

Question

Я новичок в этой вещи Ajax.

Что я пытаюсь сделать, это отправить форму отслеживания заказа & показать результаты с помощью AJAX. Так что я попытался Аякс, чтобы отобразить результаты в сНу track_result

Проблема в том, ниже код работает отлично, но результаты отслеживания отображаются в виде целой новая страницы (с заголовком, контейнер & сноски) внутри сОн track_result.

Я не могу разобраться, чтобы отображать только результаты (класс WooCommerce) внутри div, а не всю новую страницу.

здесь является 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

Проблема заключается в сборе писем всю информацию из 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. 
    } 
}