Question

我是这个Ajax的新手。

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

中显示结果

问题是代码工作正常，但跟踪结果显示为div track_result内的整个新页面（包含header，container＆amp; footer）。

我无法想象只在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

问题是你从网址中获取了你不应该获取的全部数据。

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

WooCommerce跟踪订单提交AJAX

1 个答案: