如何通过Ajax运行php函数并循环结果？

所以我正在尝试为我的网站建立一个简单的搜索功能，我不想刷新页面来返回结果。我这里的代码工作得很好，但我不知道如何使用Jquery实现这一点。我主要有两个页面，index.php和library.php

library.php中处理搜索的部分如下所示

require_once('auth/includes/connect.php');
class MainLib
{
 public function search($keyword){
        try {
            $db = DB();
            $query = $db->prepare("SELECT houses.*, users.user_id FROM houses JOIN users ON users.user_id=houses.ownerid WHERE houses.location=:keyword");
            $query->bindParam(":keyword", $keyword, PDO::PARAM_STR);
            $query->execute();
            if ($query->rowCount() > 0) {
                return $query->fetchAll(PDO::FETCH_OBJ);
                
            }
        } catch (PDOException $e) {
            exit($e->getMessage());
        }
    }
}

打印结果的index.php部分如下所示

<?php          $hdata = new MainLib();
                                            if(isset($_POST[$search])){
                                            $houses = $hdata->search($search); // get user details
                                            foreach($houses as $house){
                                              ?>

                                        <div class="single-property-box">
                                            <div class="property-item">
                                                <a class="property-img" href="#"><img src="houses/<?php echo $house->main_image ?>" alt="#">
                                                </a>
                                                <ul class="feature_text">
                                                    <?php 
                                                    if($house->featured=='true'){
                                                    ?>
                                                    <li class="feature_cb"><span> Featured</span></li>
                                                    <?php }?>
                                                    <li class="feature_or"><span><?php echo $house->gender ?></span></li>
                                                </ul>
                                                <div class="property-author-wrap">
                                                    <a href="#" class="property-author">
                                                        <img src="dash/auth/users/<?php echo $house->profilepic ?>" alt="...">
                                                        <span><?php echo $house->title ?>. <?php echo $house->surname ?></span>
                                                    </a>
                                                    <ul class="save-btn">
                                                        <li data-toggle="tooltip" data-placement="top" title="" data-original-title="Bookmark"><a href="#"><i class="lnr lnr-heart"></i></a></li>
                                                        <li data-toggle="tooltip" data-placement="top" title="" data-original-title="Add to Compare"><a href="#"><i class="fas fa-arrows-alt-h"></i></a></li>
                                                    </ul>
                                                   
                                                </div>
                                            </div>
<?php }}?>

特色

---

那么，如何在不必每次重新加载页面的情况下获得相同的结果呢？

下面是使用jQuery的基本ajax搜索表单设置。请注意，搜索输入的表单带有

onsubmit=“return false”

——这是防止默认表单提交触发页面重新加载的一种方法

该按钮调用一个函数，该函数获取搜索输入的值，确保它不是空的，并将其放入ajax函数中

PHP页面将以

$\u GET['term']

的形式接收搜索词，并执行它的操作。最后，您将从PHP函数中输出（

echo

）html，ajax

done（）

回调将把html放入您的

search_results

div中。有更多优化的方法可以将数据传输回来-可能是一个最小的

json

字符串，其中只包含您需要的结果信息，你的javascript将它膨胀成一个html模板。对于大型搜索结果，这会更好，因为这意味着传输的数据更少，结果更快

函数搜索（）{
let term=$（'#搜索_term'）.val（）.trim（）
if（term==“”）返回；//不指定搜索
$.ajax({
url:“searchFunctionPage.php”，
方法：“get”，
数据：{
任期：任期
}
}).done（函数（html）{
$（“#搜索结果”）.html（html）；
});
//示例数据，因为代码段中没有运行ajax
让html='找到100个结果..结果1…'；
$（“#搜索结果”）.html（html）；
}

搜寻

非常感谢@Kinglish，这真的很有帮助