Загрузите часть страницы php без обновления всей страницы

Question

Я использую Wordpress как систему управления контентом, а мой шаблон имеет div с классом box и содержит выпадающий список. моя цель получает значение этого выпадающего списка и запрос поста в АЯКСЕ метода с этим значением, а затем перезагрузить просто box ДИВ с помощью Ajax, для получения более ясными здесь разметки:

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

Может кто-то помочь мне сочинительство это?

Answer 1

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

Для этого вам необходимо знать об администраторе Ajax в wordpress.

Администратор 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'); 

внести необходимые изменения, так как я не могу отправить весь код для вас, некоторые усилия и выше код поможет вам получить представление о том, что, как он собирается Работа.