重新加載php頁面的一部分而不刷新整個頁面

我使用Wordpress作爲內容管理系統，我的模板有一個帶box類的div，並且包含一個下拉列表。我的目標是獲得與該值AJAX方法本droplist和查詢後的值，然後重新用剛剛box DIV阿賈克斯，爲獲得更清晰這裏是標記：重新加載php頁面的一部分而不刷新整個頁面

<select> 

     <option value="1">Item 1</option> 

     <option value="2">Item 2</option> 

     <option value="3">Item 3</option> 

     <option value="4">Item 4</option> 

    </select> 

------------------ 
    <div class="content"> 

    <?php 
    $args = array(

     "meta_query" => array(
       array(
        'key' => 'meta', 
        'value' => '$select_value', 
        ) 
      ) 
    ); 

    query_posts($args); 

     ?> 

     <?php if (have_posts()) : while (have_posts()) : the_post(); ?> 

      <?php the_content(); ?> 


     <?php endwhile; else: ?> 

      <p>sorry no post found with this value.</p> 

     <?php endif; ?>

我想示例代碼是明確的，但我想這樣做的過程：

用戶選擇dropdown list --> get select value --> put it in $select_value --> run query --> show the div box項目無需重新加載使用AJAX整個頁面...

誰能幫我出書面方式呢？

來源

2013-08-20 samia viper

請點擊這裏http://www.garyc40.com/2010/03/5-tips-for-using-ajax-in-wordpress/ – elclanrs

問題是什麼？你只需要編寫jQuery和Ajax和一個PHP函數來給你返回結果 – sven

我已經閱讀了一些這樣的帖子，不幸的是沒有獲得成功，你能給我一種方法解決這個問題，用我的代碼編寫？ Thnx爲您提供幫助。 –

<select id="select-dropdown"> 
    <option value="1">Item 1</option> 
    <option value="2">Item 2</option> 
    <option value="3">Item 3</option> 
    <option value="4">Item 4</option> 
    </select>

爲了達到這個目的，您應該瞭解WordPress中的Admin Ajax知識。

聯繫阿賈克斯：在 的header.php

<script type="text/javascript"> 
var ajax_url = '<?php echo admin_url('admin-ajax.php'); ?>'; 
</script>

你

自定義的js文件

我-custom.js，排隊的js文件

jQuery(document).ready(function(){ 
    jQuery(body).on('change','#select-dropdown', function(){ 
    var selected_item = jQuery(this).val(); 
    jQuery.ajax({ 
     type: "POST", 
     url: "ajax_url", 
     data: { 
      action: 'load_posts', 
      selected_item: selected_item, 
      }, 
     success: function(res){ 
     console.log(res); 
     //append the result in frontend 
     jQuery('.box').html(res); 
     }, 


    }) 
    }) 
});

在你function.php

function _boom_load_posts(){ 
//get your results here as per selected option 
if(!empty($_POST['selected_item'])){ 
    $selected_item = $_POST['selected_item']; 
    $output = ''; 
    //rest of the code as per selected_item, store result in $output 
    $args = array(

    "meta_query" => array(
      array(
       'key' => 'meta', 
       'value' => '$select_value', 
       ) 
     ) 
); 

query_posts($args); 
if (have_posts()) : while (have_posts()) : the_post(); 

     $output .= get_the_content(); 
endwhile; else: 

     $output .= "<p>sorry no post found with this value.</p>" 

    endif; 

    echo $output;//you result here 
    die(1); 
} 
} 
add_action('wp_ajax_load_posts', '_dot1_load_posts'); 
add_action('wp_ajax_no_priv_load_posts', '_dot1_load_posts');

進行必要的更改，因爲我不能發佈給你的整個代碼，做一些努力和上面的代碼將有助於你得到一個想法，它是如何去工作。

來源

2013-08-20 08:13:16 sven

重新加載php頁面的一部分而不刷新整個頁面

回答

相關問題