AJAX實(shí)現(xiàn)產(chǎn)品多條件篩選，極大的提升了用戶的瀏覽體驗(yàn)，避免了因?yàn)轫?yè)面加載時(shí)間多長(zhǎng)導(dǎo)致用戶瀏覽等待時(shí)間過長(zhǎng)的情況發(fā)生。開發(fā)功能的實(shí)現(xiàn)效果如下圖所示：
客戶的要求是搜索的主類名和搜索條件都需要可以編輯，所以這里需要從后臺(tái)調(diào)用數(shù)據(jù)后在頁(yè)面上輸出顯示出來。

前端代碼如下所示：
{$item['category_name']}:
{$itemv['category_name']}

接下來就是把用戶勾選的條件傳到后臺(tái)查詢到相應(yīng)的數(shù)據(jù)即可，獲取勾選條件的數(shù)據(jù)，這里用JQ獲取
前端代碼如下所示：
var arr = [];
$(function(){
$('.crumb .left a.close i').off('click').on('click', function () {
if ($(this).hasClass('on')) {
$(this).removeClass('on');
$(this).find('input').removeAttr('checked');
Searchpro();
} else {
$(this).addClass('on');
$(this).find('input').attr('checked', 'checked');
Searchpro();
}
})
})
獲取到對(duì)應(yīng)數(shù)據(jù)之后，調(diào)用JQ方法Searchpro()，把數(shù)據(jù)傳到后臺(tái)進(jìn)行數(shù)據(jù)查詢

前端代碼如下所示：
function Searchpro(page){
var all = $(".filter").find("input");
var arr = [];
all.each(function(){
if($(this).is(':checked')){
var id = $(this).attr('id');
arr.push(id);
}
});
var cid = arr.join(',');　　//arr是以&分割的字符串
if(cid==''){
var cid = 0;
}
$.ajax({
type:'post',
url: "{:U('Products/index')}",
data:{'cid':cid,'page':page},
success:function(data) {
if (data.status == 1) {
$(".fadeInRight").html(data.html);
$(".pagetion").show();
$(".pagetion").html(data.page);
}else{
$(".fadeInRight").html(data.empty);
$(".pagetion").hide();
}
}
})
}

后臺(tái)獲取前端傳過來的數(shù)據(jù)進(jìn)行處理
if (IS_AJAX) {
$cid = I('cid');
$page = I('page');
$html = '';
$map['is_show']=array('eq',1);
$map['status']=array('eq',1);
if($cid!='0'){
$pid = M('keyword')->where(array('parent_id'=>$cid))->select();
if($pid){
$cid_list = array();
foreach($pid as $k=>$v){
$cid_list[] = $v['category_id'];
}
$count1=count($cid_list);
if ($count1>1) {
foreach ($cid_list as $k1 => $v1) {
if ($k1+1==$count1) {
$mapc.='find_in_set("'.$v1.'",relax_keyword)';
}else{
$mapc.='find_in_set("'.$v1.'",relax_keyword) or ';
}
}
}else{
$mapc.='find_in_set("'.$cid_list[0].'",relax_keyword)';
}
$map['_string']=$mapc;
}else{
$cid = explode(",",$cid);
$count1=count($cid);
if ($count1>1) {
foreach ($cid as $k1 => $v1) {
if ($k1+1==$count1) {
$mapc.='find_in_set("'.$v1.'",relax_keyword)';
}else{
$mapc.='find_in_set("'.$v1.'",relax_keyword) or ';
}
}
}else{
$mapc.='find_in_set("'.$cid[0].'",relax_keyword)';
}
$map['_string']=$mapc;
}
}
// print_r($map);die;
if(empty($page)){
$page=1;
}
$listRows=9;
$order = 'order_id asc,id asc';
$pageList = 4;
$now_cool_page = $pageList/2;
$now_cool_page_ceil = ceil($now_cool_page);
$count = M('products')->where($map)->count();
$firstRow = $listRows * ($page -1);
//分頁(yè)內(nèi)容
$manuals = M('products')->where($map)->order($order)->limit($firstRow . ',' . $listRows)->select();
foreach ($manuals as $key => $v) {
$v['picture'] = unserialize($v['picture']);View Details
';
$data['status'] = 1;
}
$maxPage = ceil($count / $listRows);
$page_html = '';
if ($manuals) {
//上一頁(yè)
$up_row = $page - 1;
$page_html .= $up_row > 0 ? '': '';
for ($i=1; $i <= $pageList ; $i++) {
if (($page-$now_cool_page) <= 0) {
$num = $i;
} elseif(($page+$now_cool_page -1) >= $maxPage) {
$num = $maxPage - $pageList + $i;
} else {
$num = $page - $now_cool_page_ceil + $i;
}
if($num > 0 && $num != $page){
if($num <= $maxPage){
$page_html .= '' . $num . '';
}else{
break;
}
}else{
if($num > 0 && $maxPage != 1){
$page_html .= '' . $num . '';
}
}
}
//下一頁(yè)
$down_row = $page + 1;
$page_html .= ($down_row <= $maxPage) ? '' : '';
}else{
$data['status'] = 0;No record
';
}
$data['page'] = $page_html;
$data['html'] = $content_html;
$this->ajaxReturn($data);

網(wǎng)站題目：PHP網(wǎng)站定制之AJAX實(shí)現(xiàn)產(chǎn)品多條件篩選二
本文網(wǎng)址：http://www.2m8n56k.cn/news34/239134.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供面包屑導(dǎo)航、網(wǎng)站營(yíng)銷、網(wǎng)站策劃、服務(wù)器托管、網(wǎng)站設(shè)計(jì)、ChatGPT

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：[email protected]。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來源： 創(chuàng)新互聯(lián)