javascript - PHP 和 AJAX 加载数据

Question

美好的一天。我正在尝试为 WordPress 开发一个插件，手动将电子邮件(包含 WooCommerce 订单详细信息)发送到所需 vendor 的电子邮件。当用户从下拉列表中选择时，我很难弄清楚如何加载数据。我想在不离开页面的情况下在多个字段上使用 AJAX 加载数据。这是代码的一部分:

<select id = "dropdown_orders" class = "dropdown_orders" name="dropdown_orders" onchange="myFunction(this.value)">
    <option value=""><?php _e( 'Select an Order', 'woocommerce-manual-order-forwarding' ); ?></option>

                <?php
                    foreach($order_details as $details => $value)
                    {
                        echo '<option value="' . $value['ID'] . '">' . "Order ID: " .$value['ID'] . '</option>';
                    }
                ?>
</select>

这是下拉列表的代码，用于显示所有状态为“完成”的订单。这是 AJAX 部分。

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js"</script>
     <script type="text/javascript">
          function myFunction(value)
                    {
                        if(value!="")
                        {
                            $.ajax(
                            {
                                type: "GET",
                                url: '<?php echo $_SERVER['PHP_SELF']; ?>',
                                data: { experience: value},
                                success: function(data) {

                                    alert("You have selected the Order ID of:  " + value);
                              //I want to display a div element that contains all the data from the WordPress database.
                            }
                        });
                        }
                        else
                        {
                            alert("Please Select and Order ID first!");
                        }
                    }
</script>

我想要实现的是，当用户从下拉列表中选择一个选项时，页面将显示一个 div 元素，其中显示有关订单的所有详细信息。有可能这样做吗？任何帮助，将不胜感激。我知道在 AJAX 的“成功”部分之后调用 PHP 函数是不可能的。

在此处编辑在 display-orders-admin.php

<div id="forward-field" class="wrap">
    <h2><?php _e( 'WooCommerce Order Forwarding System',  'woocommerce-manual-order-forwarding' ); ?></h2>
        <p><?php _e( '<strong>Note:</strong> This add-on gives you the capability to forward your WooCommerce orders individually on your desired supplier.', 'woocommerce-manual-order-forwarding');?></p>
    </div>

    <div class="container-box">
                <h2><?php _e( 'Order Details', 'woocommerce-manual-order-forwarding' ); ?></h2>
                <p><?php _e( '<strong>Note:</strong> Please select an order from the drop down list below to use the order e-mail forwarding feature.', 'woocommerce-manual-order-forwarding');?></p>

                <select id = "dropdown_orders" class = "dropdown_orders" name="dropdown_orders">
                <option value=""><?php _e( 'Select an Order', 'woocommerce-manual-order-forwarding' ); ?></option>

                <?php
                    foreach($order_details as $details => $value)
                    {
                        echo '<option value="' . $value['ID'] . '">' . "Order ID: " .$value['ID'] . '</option>';
                    }
                ?>

                </select>

                <div class="custom-border"></div>   

                <!--    TRIGGER AN ACTION HERE WHEN THE USER SELECT FROM ONE OF THE ORDER IDS FROM DROPDOWN   -->
                <!--    EXECUTE A JQUERY | AJAX REQUEST TO PULL OUT ALL THE DETAILS OF THE ORDER WITH THE GIVEN ID   -->
                <!--   DISPLAY THE ORDER DETAILS USING DIV ELEMENTS ON THE SAME PAGE   -->

        </div>

我怎样才能达到评论中的那些？

Answer 1

首先您使用的是 jQuery，但您使用 onchange 做一些老派的事情。我们不要那样做。

删除 onchange 属性，而是使用 .change() 将 onchange 事件监听器附加到您的下拉列表中方法。

<select id="dropdown_orders" class="dropdown_orders" name="dropdown_orders">
    <option value=""><?php _e( 'Select an Order', 'woocommerce-manual-order-forwarding' ); ?></option>
    <?php foreach ($order_details as $details => $value) : ?>
        <option value="<?php echo $value['ID'] ?>">Order ID: <?php echo $value['ID'] ?></option>
    <?php endif ?>
</select>

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js"</script>
<script>
$(function () {
    $('#dropdown_orders').change(function () {
        if (this.value != "") {
            // fyi: $.getJSON() method is a shorter syntax
            $.ajax({
                type: "GET",
                url: '<?php echo $_SERVER['PHP_SELF'] ?>',
                data: { experience: this.value },
                dataType: "json",
                success: function (res) {
                    // ...
                }
            });
        } else {
            alert("Please Select and Order ID first!");
        }
    });
});
</script>

现在，关于您的实际问题，让您的 PHP 使用 json_encode() 返回一个 JSON 字符串. PHP 脚本外观的入门示例:

// first step: check the request parameter
if (isset($_GET['experience'])) {
    // get the order detail e.g. $order based on the request parameter
    // let's assume $order is an associative array e.g. $order = ['id' => 123, 'price' => 12.40]

    // final step: send back a JSON-encoded response
    header('Content-Type: application/json');
    echo json_encode($order); // only this should be echo'd
}

回到 HTML/JS 代码，您所要做的就是在 success 回调中收到响应 res 后对其进行处理。首先，创建并重新使用隐藏的 block 元素来存储您的订单详细信息可能是个好主意。这就像一个模板。订单信息准备好后，您只需出示即可。

因此，首先将以下内容添加到您的 HTML 中:

<div id="order-detail" style="display: none;">
    <div class="id"></div>
    <div class="price"></div>
</div>

接下来，更改您的 JS。

$(function () {
    $('#dropdown_orders').change(function () {
        if (this.value != "") {
            // fyi: $.getJSON() method is a shorter syntax
            $.ajax({
                type: "GET",
                url: "<?php echo $_SERVER['PHP_SELF'] ?>",
                data: { experience: this.value },
                dataType: "json",
                success: function (res) {
                    // load the information from your response into the DIV
                    var $div = $('#order-detail');
                    $div.find('.id').html(res.id);
                    $div.find('.price').html(res.price);
                    // show the DIV once everything is ready
                    $div.show();
                }
            });
        } else {
            alert("Please Select and Order ID first!");
        }
    });
});

除了使用模板来存储您的订单详细信息，您还可以在 success 回调中使用订单信息构建 DIV；但是，这可能会导致代码困惑。