WordPress和WooCommerce -使用Ajax传递变量

Question

我创建了一个自定义模板，允许用户按颜色进行筛选(custom-product.php，下面)。我想使用ajax调用将选定的html标记的ID传递给有产品(get-fabric.php)的页面。我的问题是所选选项的ID没有在URL中传递。日志显示，我成功地获得了所选选项的ID，但在加载后续页面(get-fabric.php)时它是空的。

这是custom-product.php

<div class="col-md-8">
    <label class="filter-label">Filter by:</label>
        <form method = "POST">
            <select name="select_colour" id ="id-select-colour">
                <option>Colour</option>
                <?php    
                    $terms = get_terms( 'pa_fabric_color' );
                    foreach ($terms as $each_term) {
                ?>
                <option value = "<?php echo $each_term->name; ?>"><?php echo $each_term->name; ?></option>
                <?php }?>
           </select>
       </form>
</div>

和get-fabric.php

        <?php  


        if(!empty($_POST['select_colour']))
        {
        $args = array(
        'post_type'      => 'product',
        'posts_per_page' => 1000,
        'product_cat'    => 'fabric'


        );

        $loop = new WP_Query( $args );


            while ( $loop->have_posts() ) : $loop->the_post();
            global $product;
            $regular_price = $product->get_price_html();

            $image = wp_get_attachment_image_src( get_post_thumbnail_id( $loop->post->ID ), 'product' );
                echo '  <div class="col-md-3 fabric-active" data-fabcode="32860">
                <div class="fabric-cloth">
                    <div class="fabric-data">
                        <img src="'.$image[0].'" class="img-responsive cursor-on" />
                        <div class="fabric-code">
                            <p>'.$product->post->post_title.'</p>
                            <span>'.$regular_price.'</span>
                        </div>
                    </div>
                </div>
            </div>';
            endwhile;

        wp_reset_query();
        ?>
        <div class="col-md-3 fabric-active" data-fabcode="32860">
                <div class="fabric-cloth">
                    <div class="fabric-data">
                        <img src="'.$image[0].'" class="img-responsive cursor-on" />
                        <div class="fabric-code">
                            <p>'.$product->post->post_title.'</p>
                            <span>'.$regular_price.'</span>
                        </div>
                    </div>
                </div>
            </div>
        <?php
        }
        ?>

以及ajax代码：

    <script>
            jQuery(document).ready(function(){
                jQuery("#id-select-colour").change(function(){ 
                var allcoulour =jQuery(this).val();
                var dataString = allcoulour; 


                jQuery.ajax({ 
                    type: "POST", 
                    url: "<?php echo bloginfo('url')?>/wp-content/themes/woocommerce-extension/templates/get-fabric.php", /* PAGE WHERE WE WILL PASS THE DATA */
                    data: dataString,
                    success: function(result){ 
                        jQuery(".fabric-row").html(result); 
                    }


                });

                console.log(dataString);

                });

            });
    </script>

Answer 1

您必须将数据作为键值对传递。

            jQuery.ajax({ 
                type: "POST", 
                url: "<?php echo bloginfo('url')?>/wp-content/themes/woocommerce-extension/templates/get-fabric.php", /* PAGE WHERE WE WILL PASS THE DATA */
                data: {"select_colour":allcoulour}, /*or 
                data: "select_colour="+allcoulour,*/
                success: function(result){ 
                    jQuery(".fabric-row").html(result); 
                }
            });
            console.log(dataString);
            });