Question

我尝试使用AJAX在同一页面上加载我的WordPress搜索结果。但我无法弄清楚如何在页面上显示搜索结果。

我用Google搜索并找到了很多代码，但大多数代码都没有为我工作。我最接近的就是这个。这是我到目前为止所做的。

HTML

<section id="toplevel-frontpage">
    <div class="container">
        <div class="block">
            <div class="row">
                <div class="col-xs-12 col-sm-12 col-md-8 col-lg-8">
                    <form id="lets_search" action="" style="width:400px;margin:0 auto;text-align:left;">
                        Search:<input type="text" name="str" id="str">
                            <input type="submit" value="send" id="send">
                    </form>
                    <div id="search_results"></div>
                </div>
            </div>
        </div>
    </div>
</section>

jQuery （阻止搜索转到其他页面并加载AJAX文件）

   $(function() {
        $("#lets_search").bind('submit',function() {
          var value = $('#str').val();
          $.post('wp-content/themes/MyTheme/includes/search-post-results.php',{value:value}, function(data){
          $("#search_results").html(data);
        });
          return false;
       });
   });

搜索-后results.php

这就是我被困的地方。如果我加载正常loop，我会收到500内部服务器错误。现在我明白了：

<?php session_start(); ?>
<?php
/*
Template Name: Search Page
*/
?>
<?php 
$value = $_POST['value'];
$path = $_SERVER['DOCUMENT_ROOT'];

    include_once $path . '/wp-config.php';
    include_once $path . '/wp-load.php';
    include_once $path . '/wp-includes/wp-db.php';
    include_once $path . '/wp-includes/pluggable.php';

    echo sprintf( __( '%s Search Results for ', 'html5blank' ), $wp_query->found_posts ); echo get_search_query();

?>

我认为我必须包含WordPress核心文件，因此我可以使用WordPress代码，但echo get_search_query()什么都不做？ $_POST['value'];输出搜索的输入。

Answer 1

您的代码有效。我把它写成了一个插件。我可以不在没有你的代码的情况下加载AJAX。我唯一改变的是评论以下内容，因为它与其他插件冲突并且抛出错误，但没有它就能很好地工作（需要加载wp-config.php）。

   // include_once $path . '/wp-load.php';
   // include_once $path . '/wp-includes/wp-db.php';
   // include_once $path . '/wp-includes/pluggable.php';

非常感谢您为我们更新您的工作代码。

Answer 2

（代表问题作者发布解决方案）。

我已使用以下代码解决了我的问题：

<强> HTML

<section id="toplevel-frontpage">
    <div class="container">
        <div class="block">
            <div class="row">
                <div class="col-xs-12 col-sm-12 col-md-8 col-lg-8">
                    <form id="lets_search" action="" style="width:400px;margin:0 auto;text-align:left;">
                        Search:<input type="text" name="str" id="str">
                            <input type="submit" value="send" id="send">
                    </form>
                    <div id="search_results"></div>
                </div>
            </div>
        </div>
    </div>
</section>

jQuery （阻止搜索转到其他页面并加载AJAX文件）

   $(function() {
        $("#lets_search").bind('submit',function() {
          var value = $('#str').val();
          $.post('wp-content/themes/MyTheme/includes/search-post-results.php',{value:value}, function(data){
          $("#search_results").html(data);
        });
          return false;
       });
   });

search-post-results.php

<?php session_start(); ?>
    <?php
    /*
    Template Name: Search Page
    */
    ?>
    <?php 
    $value = $_POST['value'];
    $path = $_SERVER['DOCUMENT_ROOT'];

        include_once $path . '/wp-config.php';
        include_once $path . '/wp-load.php';
        include_once $path . '/wp-includes/wp-db.php';
        include_once $path . '/wp-includes/pluggable.php';

    ?>
    <?php
    $s=$_POST['value'];
    $args = array(
                    'post_type' => 'team',
                    'orderby' => 'title',
                    'order' => 'ASC',
                    'posts_per_page' => -1,
                    's' =>$s
                );
        // The Query
    $the_query = new WP_Query($args);
    if ( $the_query->have_posts() ) {
            while ( $the_query->have_posts() ) {
               $the_query->the_post();
               $value = get_the_id();
               $mail = get_field('e-mail_adres', $value);
               $afd = get_field('functie', $value);
               $intrn = get_field('intern_telefoonnummer', $value);
               $mob = get_field('mobiel', $value);
               $locatie = get_field('locatie', $value);


                     ?>

               <div class="col-xs-12 col-sm-12 col-md-6 col-lg-6">
               <div style="min-height:150px;">  
                    <div class="col-xs-12">
                        <h3><?php the_title(); ?></h3>  
                   </div>
                    <div class="col-xs-12 col-sm-12 col-md-2 col-lg-2">
                        <div class="thumbnail-image">
                            <?php echo get_the_post_thumbnail(); ?>
                        </div>
                    </div>
                    <div class="col-xs-12 col-sm-12 col-md-10 col-lg-10">
                        <div class="row">
                            <table class="zoek-col">
                                <?php if( get_field('intern_telefoonnummer') ): ?>
                                    <tr>
                                        <td class="td-top">Tel. Intern:</td>
                                        <td><?php the_field('intern_telefoonnummer'); ?></td>
                                    </tr>
                                <?php endif; ?>
                                <?php if( get_field('intern_utr') ): ?>
                                    <tr>
                                        <td class="td-top">Tel. Intern (extra):</td>
                                        <td><?php the_field('intern_utr'); ?></td>
                                    </tr>
                                <?php endif; ?>
                                <tr>
                                    <td class="td-top">E-mail adres:</td>
                                    <td><a href="mailto:<?php echo $mail; ?>"><?php echo $mail; ?></a></td>
                                </tr>
                                <?php if( get_field('mobiel_werk') ): ?>
                                    <tr>
                                        <td class="td-top">Mobiel werk:</td>
                                        <td><?php the_field('mobiel_werk'); ?></td>
                                    </tr>
                                <?php endif; ?>
                                <tr>
                                    <td class="td-top">Mobiel privé:</td>
                                    <td><?php echo $mob; ?></td>
                                </tr>
                                <?php if( get_field('locatie') ): ?>
                                    <tr>
                                        <td class="td-top">Locatie:</td>
                                        <td><?php the_field('locatie'); ?></td>
                                    </tr>
                                <?php endif; ?>
                            </table>
                        </div>
                    </div>          
                </div> 
                </div>          
              <?php
            }
        }else{
    ?>
            <h3>Geen collega's gevonden</h3>
                <p style="font-size:1.3rem;">Probeer het opnieuw</p>
    <?php } ?>

使用AJAX加载Wordpress搜索结果

2 个答案: