如何在 WooCommerce 订单跟踪中显示 ajax 结果

Question

在 WooCommerce 中的订单跟踪中，跟踪结果在提交跟踪表单时显示为一个全新的页面。但是，我想看到的是 AJAX 中的结果。

这是 woocommerce/templates/order/form-tracking.php 中的表单：

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

    <p><?php esc_html_e( 'To track your order, please enter your Order ID and the email you used during checkout. You can find these in your receipt and confirmation email.', 'woocommerce' ); ?></p>

    <p class="form-row form-row-first"><label for="orderid"><?php esc_html_e( 'Order ID', 'woocommerce' ); ?></label> <input class="input-text" type="text" name="orderid" id="orderid" value="<?php echo isset( $_REQUEST['orderid'] ) ? esc_attr( wp_unslash( $_REQUEST['orderid'] ) ) : ''; ?>" placeholder="<?php esc_attr_e( 'Found in your order confirmation email.', 'woocommerce' ); ?>" /></p><?php // @codingStandardsIgnoreLine ?>
    <p class="form-row form-row-last"><label for="order_email"><?php esc_html_e( 'Billing email', 'woocommerce' ); ?></label> <input class="input-text" type="text" name="order_email" id="order_email" value="<?php echo isset( $_REQUEST['order_email'] ) ? esc_attr( wp_unslash( $_REQUEST['order_email'] ) ) : ''; ?>" placeholder="<?php esc_attr_e( 'Email you used during checkout.', 'woocommerce' ); ?>" /></p><?php // @codingStandardsIgnoreLine ?>
    <div class="clear"></div>

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

</form>

我尝试将其添加到同一个文件中，紧跟在结束表单标记之后和脚本标记中：

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
});

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

我从大约 5 年前提出的另一个问题中找到了这个 jQuery，但是 jQuery 似乎没有做出任何改变，订单跟踪结果仍然显示为全新的页面。我不知道我还应该添加什么或者是否有任何问题。我应该在另一个文件中添加 jQuery 吗？我应该在 jQuery 中添加更多内容还是进行更多修改？

谢谢大家，我是个菜鸟！

Answer 1

有几件事是错误的。一个提示是首先检查浏览器控制台中的任何错误。里面应该有。

第一个可能的问题：

在 submit() 处理程序中返回 false 可以防止表单提交，但前提是没有错误。更好的方法（也可以让您轻松查看浏览器控制台日志）是使用event.preventDefault()

$('.track_order').submit(function(event) { // <-- add event as argument here
    event.preventDefault(); // <-- better way to prevent form from submitting
    // Rest of your script code
}

第二个可能的问题：

$ 可能不存在。在 Wordpress 中，您可能应该在此代码中使用 jQuery 而不是 $ 简写（除非您定义 $）。所以第一步是在<script>标签内用jQuery替换$。

jQuery('.track_order').submit(function(event) { // <-- replace $ by jQuery
    event.preventDefault();
    jQuery.ajax({ // // <-- replace $ by jQuery
        data: formData,
        type: jQuery(this).attr('method'), // <-- replace $ by jQuery
        url: jQuery(this).attr('action'), // <-- replace $ by jQuery
        success: function(response) {
            jQuery('.track-results').html(response); // <-- replace $ by jQuery
        }
    });
});

第三个可能的问题：

确保您在某处确实有一个带有“track-results”类的 HTML 元素，以便在通过 AJAX 加载后可以显示数据。

<div class="track-results"></div>

第四个可能的问题：

FormData 不能与 jQuery 的 ajax() 这样的方法一起使用，因为 jQuery 想要对其进行字符串化，但当数据作为 FormData 对象提供时它不应该这样做。

两种可能的解决方案：

解决方案 1 - 在执行 ajax() 请求时将 processData 和 contentType 设置为 false

    jQuery.ajax({
        processData: false,
        contentType: false,
        // All the other fields
    });

或解决方案 2 - 只需使用纯 JavaScript 对象而不是 FormData

var formData = {
    'from_ajax': '1'
}

而不是

var formData = new FormData();
formData.append('from_ajax', '1');

第五个可能的问题：

脚本的最后一部分是 PHP，不应出现在 JS 脚本标签中：

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

相反，它应该在表单的action 属性中提到的 PHP 文件中。

一些额外信息：

也不要只编辑核心 Wordpress 文件。您可能可以在 Wordpress 中使用 AJAX 操作来做您需要做的事情。虽然我认为文档对初学者不太友好，但这里是：https://developer.wordpress.org/plugins/javascript/ajax/

WP Codex 中的这个较早的条目实际上可能以更简单的方式解释了基础知识：https://codex.wordpress.org/AJAX_in_Plugins

完整示例：

我在这里通过包含 wp/wp-load.php 来加载 WP 核心，以便我可以使用 WP 函数，并且我已将 action 属性设置为测试文件本身。只是为了给你一个包含在一个文件中的完整示例。

<?php
include 'wp/wp-load.php';
if (isset($_POST['from_ajax']) && $_POST['from_ajax'] == 1) {
    die('tada! here is the example response ...');
}
?>

<form action="test.php" method="post" class="woocommerce-form woocommerce-form-track-order track_order">

    <p><?php esc_html_e( 'To track your order, please enter your Order ID and the email you used during checkout. You can find these in your receipt and confirmation email.', 'woocommerce' ); ?></p>

    <p class="form-row form-row-first"><label for="orderid"><?php esc_html_e( 'Order ID', 'woocommerce' ); ?></label> <input class="input-text" type="text" name="orderid" id="orderid" value="<?php echo isset( $_REQUEST['orderid'] ) ? esc_attr( wp_unslash( $_REQUEST['orderid'] ) ) : ''; ?>" placeholder="<?php esc_attr_e( 'Found in your order confirmation email.', 'woocommerce' ); ?>" /></p><?php // @codingStandardsIgnoreLine ?>
    <p class="form-row form-row-last"><label for="order_email"><?php esc_html_e( 'Billing email', 'woocommerce' ); ?></label> <input class="input-text" type="text" name="order_email" id="order_email" value="<?php echo isset( $_REQUEST['order_email'] ) ? esc_attr( wp_unslash( $_REQUEST['order_email'] ) ) : ''; ?>" placeholder="<?php esc_attr_e( 'Email you used during checkout.', 'woocommerce' ); ?>" /></p><?php // @codingStandardsIgnoreLine ?>
    <div class="clear"></div>

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

</form>

<div class="track-results">result will be shown here</div>

<script src="https://code.jquery.com/jquery-3.5.0.min.js"></script>
<script>
var formData = new FormData();
formData.append('from_ajax', '1');// append this to your form.

jQuery('.track_order').submit(function(event) { // catch the form's submit event
    event.preventDefault(); // prevent form submit
    jQuery.ajax({ // create an AJAX call...
        data: formData, // get the form data
        processData: false,
        contentType: false,
        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
        }
    });
});
</script>

希望对你有帮助！