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. 
    } 
}