无法使用AJAX加载搜索结果

时间:2015-08-26 作者:squid

我正在尝试在我的页面上加载搜索结果,而无需重新加载。我已经尝试了多种方法,但仍然无法实现,尽管使用了其他人确认的解决方案。

请查找以下代码:

搜索帖子结果。php(在includes文件夹中)

<?php
/* Template Name: Search Post Results */        
?>             
<div class="contentarea">
    <div id="content" class="content_right">  
             <h3>Search Result for : <?php echo "$s"; ?> </h3>       
                 <?php if ( have_posts() ) : while ( have_posts() ) : the_post(); ?>    
                     <div id="post-<?php the_ID(); ?>" class="posts">        
                         <article>        
                             <h4><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a><h4>          
                         </article> 
                     </div>
                 <?php endwhile; ?>
                 <?php endif; ?>
    </div>
</div>
功能。php

add_action(\'wp_ajax_nopriv_wpa56343_search\', \'wpa56343_search\',100);
add_action(\'wp_ajax_wpa56343_search\', \'wpa56343_search\',100);
function wpa56343_search()
  {
    global $wp_query;
    $search = $_POST[\'search_val\'];
    $args = array(
      \'s\' => $search,
      \'posts_per_page\' => 5
    );
    $wp_query = new WP_Query($args);
    get_template_part(\'includes/search-post-results\');
    exit;
  }
HTML表单

<div id="my_search">
    <form role="search" method="get" id="searchform"  >
        <input type="text" value="" name="s" id="s" />
        <input type="submit" id="searchsubmit" value="Search" />
    </form>
</div>
jQuery

<script>
jQuery(document).ready(function () {
  jQuery("#searchsubmit").click(function (e) {
      e.preventDefault();
      var search_val = jQuery("#s").val();
      jQuery.post(
          "<?php echo admin_url(\'admin-ajax.php\'); ?>", {
            action:\'wpa56343_search\',
            search_string:search_val
          }, function (response) {
            jQuery(\'body\').append(response);
          }
      }
   });
});
</script>
使用我的模板,而不是在同一页上获得结果,我只需转到url/s=search\\u val并加载默认搜索结果模板。

谢谢你的帮助。

E: 缓慢前进。使用上述代码后,我得到的错误是未捕获引用错误:未定义wpa56343\\u搜索。

1 个回复
最合适的回答,由SO网友:TheDeadMedic 整理而成

JavaScript应为:

<script>
    jQuery( document ).ready(function ( $ ) {
        $( "#searchform" ).on( "submit", function ( ev ) {
            ev.preventDefault();

            $.post(
                "<?php echo admin_url( \'admin-ajax.php\' ) ?>",
                {
                    action: "wpa56343_search",
                    search: $( "#s" ).val()
                },
                function ( response ) {
                    $( "body" ).append( response );
                }
            );
        });
    });
</script>
以及functions.php 应为:

function wpa56343_search() {
    if ( ! isset( $_POST[\'search\'] ) )
        exit;

    query_posts(
        array(
            \'posts_per_page\' => 5,
            \'no_found_rows\' => true,
            \'post_type\' => get_post_types( array( \'public\' => true ) ),
            \'s\' => wp_unslash( ( string ) $_POST[\'search\'] ),
        )
    );

    get_template_part( \'includes/search-post-results\' );
    exit;
}

add_action( \'wp_ajax_nopriv_wpa56343_search\', \'wpa56343_search\', 100 );
add_action( \'wp_ajax_wpa56343_search\',        \'wpa56343_search\', 100 );
通常,您应该避免query_posts, 但在这种情况下,它是完全有效的,因为我们正在为search-post-results.php 使用。

相关推荐

尝试在WordPress中实现AJAX注释,遇到WP错误

我试图在WordPress中为我的评论实现Ajax,使用this tutorial. 但我在将教程中的代码集成到自己的预构建主题时遇到了问题。问题是,我要么得到一个WP错误“检测到重复注释;看来你已经说过了!”或标准500错误。以下是我得到的:下面是我对ajax的评论。js文件如下所示: * Let\'s begin with validation functions */ jQuery.extend(jQuery.fn, { /* * check i