我如何在wordpress中使用ajax

-1

我是ajax的新手。我想在頁面上放置一個組合框。 Combobox包含選項受歡迎程度，按價格和按日期。我如何在wordpress中使用ajax

我想在不重新加載頁面的情況下更改ajax的內容。

例如，我正在展示手錶產品。當用戶改變組合框處的值時，頁面顯示的值/圖像將相應地改變。

1）我想知道如何使用ajax與文字按下。 2）代碼來實現這一點。

我使用這個代碼：

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

來源

2015-01-12 MC3

你能告訴我們你已經嘗試過？您是否閱讀過WP中有關AJAX的WP Codex內容？ http://codex.wordpress.org/AJAX_in_Plugins（標題說「插件」，但也應該適用於主題。） – ojrask

http://www.w3schools.com/PHP/php_ajax_database.asp – Misunderstood

實際上我想實現的是我想要改變頁面的結果（從wp數據庫在頁面上顯示的圖像）產品圖像將在從組合框中選擇選項時改變。如果用戶選擇按選項排序的熱門頁面內容加載。 – MC3

實際上，你不需要實現Ajax，但你可以用簡單的JS做到這一點。我可以與您分享一個簡單的代碼供您參考。

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

試試這個簡單的HTML文件。 WP中也很容易實現它。

來源

2015-01-12 07:42:09 Netgains

我有此代碼 – MC3

– MC3

我清除我的自我想要達到的就像那個網站。 – MC3

您可以在下面找到您的代碼的解決方案：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<title>Untitled Document</title> 
<script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript"></script> 
<script type="text/javascript"> 
$(document).ready(function() { 
$("#selector").change(function() { 
    var selectedValue = $("#selector option:selected").val(); 
    alert('Selected text ' + selectedValue); 
});}); 
</script> 
</head> 

    <body> 
<select name="orderby" class="orderby" id="selector"> 
<option value="menu_order">Default sorting</option> 
<option value="popularity">Sort by popularity</option> 
<option value="date ">Sort by newness</option> 
<option value="price">Sort by price: low to high</option> 
<option value="price-desc">Sort by price: high to low</option> 
</select> 
</body> 
</html>

來源

2015-01-12 10:06:18 Netgains

它顯示我選擇的選項。我想要的是「來自wp數據庫的數據將被提取並顯示爲每個選項」正如在我的代碼中，您可以看到一個循環正在運行以顯示來自數據庫的數據。 – MC3

我想更改UL中的值$ args = array（'post_type'=>'product'，'product_cat'=>'Rings'，'stock'=> 1，'posts_per_page'=> 12，'orderby' =>'$ ordr'，'order'=>'DESC'）; – MC3

我如何在wordpress中使用ajax

回答

相關問題