我如何在Wordpress中使用Ajax

Question

I am new to ajax. I want to place a combobox on page. Combobox contain option by popularity, by price and by date.

I want to change the content of div with ajax without reloading the page.

e.g i am displaying a product of watches. when user change the value at combo box, the value/images displayed at page will be change as accordingly.

1) i want to know how to use ajax with word press. 2)code to achieve this.

I am using this code:

            <div class="prodimg">


<ul class="rcollpro">

    <?php
        $ordr ='date';
        $args = array( 'post_type' => 'product',  'product_cat' => 'Rings', 'stock' => 1, 'posts_per_page' => 12, 'orderby' =>'$ordr','order' => 'DESC' );
        $loop = new WP_Query( $args );
        while ( $loop->have_posts() ) : $loop->the_post(); global $product; ?>

                <li class="rcollproli">    

                    <a href="<?php the_permalink(); ?>"><?php if (has_post_thumbnail( $loop->post->ID )) echo get_the_post_thumbnail($loop->post->ID, 'shop_catalog'); else echo '<img src="'.woocommerce_placeholder_img_src().'" alt="Placeholder" width="65px" height="115px" />'; ?></a>

                        <h3><?php the_title(); ?></h3>

                           <span class="price"><?php echo $product->get_price_html(); ?></span><br />



                    <?php woocommerce_template_loop_add_to_cart( $loop->post, $product ); ?>
                </li><!-- /span3 -->
    <?php endwhile; ?>
    <?php wp_reset_query(); ?>

</ul><!-- /row-fluid -->

            </div>

Answer 1

You dont actually need to implement Ajax, but you can do it with simple JS. I can share a simple code with you for your reference.

<script type="text/javascript">
 function hourChange(selectObj) {
   var selectIndex=selectObj.selectedIndex;
   var selectValue=selectObj.options[selectIndex].text;
   var output=document.getElementById("output");
   //alert(output.innerText);
   output.innerHTML=selectValue;
 }

</script>

<select id="hour" onchange="hourChange(this);">

  <option>1</option>
  <option>2</option>

</select>

<p/>

you selected: <span id="output">1</span>

Try this in simple HTML file. And it's easy to implement it in WP too.