重新加载php页面的一部分而不刷新整个页面答案

【问题标题】：Reload a part of php page without refreshing whole page重新加载php页面的一部分而不刷新整个页面
【发布时间】：2013-08-22 04:45:50
【问题描述】：

我使用 Wordpress 作为内容管理系统，我的模板有一个带有 box 类的 div，并包含一个下拉列表。我的目标是使用这个值在 ajax 方法中获取这个下拉列表和查询帖子的值，然后使用 ajax 重新加载 box div，为了更清楚这里是标记：

   <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 重新加载整个页面...

有人可以帮我写这个吗？

【问题讨论】：

在这里参观garyc40.com/2010/03/5-tips-for-using-ajax-in-wordpress
有什么问题？？您只需要编写 jQuery 和 Ajax 以及一个 PHP 函数即可返回结果
我读过一些这样的帖子，不幸的是没有成功，你能给我一个用我的代码写的方法来解决这个问题吗？感谢您的帮助。
@boom_shiva ，是的，你是对的，但我不知道它们之间的关系如何，主要问题是获取选择值并将其放入 $select_value 变量中，你能帮我吗?
你没有检查过更新的答案吗？

标签： php javascript ajax wordpress

【解决方案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>

为此，您应该了解 wordpress 中的 Admin Ajax。

管理 Ajax：在你的 header.php

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

在你的自定义 js 文件中

my-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');

进行必要的更改，因为我无法为您发布整个代码，请努力，上面的代码将帮助您了解它是如何工作的。

【讨论】：