[英]How do I run my php function through Ajax and loop through the results?
所以我正在嘗試為我的網站構建一個簡單的搜索 function,我不想刷新頁面來返回結果。 我在這里的代碼運行良好,但我不知道如何使用 Jquery 來實現它。 我主要有2頁,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"
的表單中 - 這是一種防止默認表單提交會觸發頁面重新加載的方法。
該按鈕調用 function 獲取搜索輸入的值,確保它不是空白,並將其放入 ajax function
PHP 頁面將接收搜索詞作為$_GET['term']
並執行此操作。 In the end, you will output ( echo
) html from your PHP functions, which the ajax done()
callback will put into your search_results
div. 有更優化的數據傳回方式 - 可能是一個最小的json
字符串,其中僅包含結果所需的信息,您的 javascript 將其接收並膨脹到 html 模板中。 對於大型搜索結果,這會更好,因為這意味着傳輸的數據更少,結果更快。
function search() { let term = $('#search_term').val().trim() if (term == "") return; // nothign to search $.ajax({ url: "searchFunctionPage.php", method: 'get', data: { term: term } }).done(function(html) { $('#search_results').html(html); }); // sample data since we dont have the ajax running in the snippet let html = 'Found 100 results.. <div>result 1</div><div>...</div>'; $('#search_results').html(html); }
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <form onsubmit='return false;'> <input type='text' placeholder="Type in your search keyphrase" id='search_term' /> <button type='button' onclick='search()'>Search</button> </form> <div id='search_results'></div>
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.