我如何 运行 我的 php 函数通过 Ajax 并循环遍历结果?
How do I run my php function through Ajax and loop through the results?
所以我正在尝试为我的网站构建一个简单的搜索功能,我不想刷新页面以获得 return 结果。我这里的代码工作得很好,但我不知道如何使用 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"
的表单中 - 这是一种防止默认表单提交的方法,它会触发页面重新加载。
该按钮调用一个函数来获取搜索输入的值,确保它不为空,然后将其放入 ajax 函数
PHP 页面将收到搜索词 $_GET['term']
并执行它。最后,您将从 PHP 函数输出 (echo
) html,ajax done()
回调将放入您的 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>
所以我正在尝试为我的网站构建一个简单的搜索功能,我不想刷新页面以获得 return 结果。我这里的代码工作得很好,但我不知道如何使用 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"
的表单中 - 这是一种防止默认表单提交的方法,它会触发页面重新加载。
该按钮调用一个函数来获取搜索输入的值,确保它不为空,然后将其放入 ajax 函数
PHP 页面将收到搜索词 $_GET['term']
并执行它。最后,您将从 PHP 函数输出 (echo
) html,ajax done()
回调将放入您的 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>