请教jquery+php实现无刷新条件筛选应该怎么做
<ul class="select">
<li class="select-list">
<dl id="select1">
<dt>上装:</dt>
<dd class="select-all selected"><a href="#">全部</a></dd>
<dd><a href="#">针织衫</a></dd>
<dd><a href="#">毛呢外套</a></dd>
<dd><a href="#">T恤</a></dd>
<dd><a href="#">羽绒服</a></dd>
<dd><a href="#">棉衣</a></dd>
<dd><a href="#">卫衣</a></dd>
<dd><a href="#">风衣</a></dd>
</dl>
</li>
<li class="select-list">
<dl id="select2">
<dt>裤装:</dt>
<dd class="select-all selected"><a href="#">全部</a></dd>
<dd><a href="#">牛仔裤</a></dd>
<dd><a href="#">小脚/铅笔裤</a></dd>
<dd><a href="#">休闲裤</a></dd>
<dd><a href="#">打底裤</a></dd>
<dd><a href="#">哈伦裤</a></dd>
</dl>
</li>
<li class="select-result">
<dl>
<dt>已选条件:</dt>
<dd class="select-no">暂时没有选择过滤条件</dd>
</dl>
</li>
</ul>
现在的问题是,我需要页面无刷新更新所选的内容,但是不会jquery,请高手帮忙写下吧,后台是php的 展开
确保引入JQ库
无刷新JQ用的是AJAX,AJAX运行建立在服务器的基础上,一定要在服务器运行的情况下测试
你的代码要稍微调整下,原页面上不能出现a标签的链接,因为点击后直接就跳转了
以下是代码部分
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>无标题文档</title>
</head>
<body>
<ul class="select">
<li class="select-list">
<dl id="select1">
<dt>上装:</dt>
<dd class="select-all selected"><span id="1" class="tt">全部</span></dd>
<dd><span id="2" class="tt">针织衫</span></dd>
<dd><span id="3" class="tt">毛呢外套</span></dd>
<dd><span id="4" class="tt">T恤</span></dd>
<dd><span id="5" class="tt">羽绒服</span></dd>
<dd><span id="6" class="tt">棉衣</span></dd>
<dd><span id="7" class="tt">卫衣</span></dd>
<dd><span id="8" class="tt">风衣</span></dd>
</dl>
</li>
<li class="select-list">
<dl id="select2">
<dt>裤装:</dt>
<dd class="select-all selected"><span id="11" class="tt">全部</span></dd>
<dd><span id="12" class="tt">牛仔裤</span></dd>
<dd><span id="13" class="tt">小脚/铅笔裤</span></dd>
<dd><span id="14" class="tt">休闲裤</span></dd>
<dd><span id="15" class="tt">打底裤</span></dd>
<dd><span id="16" class="tt">哈伦裤</span></dd>
</dl>
</li>
<li class="select-result">
<dl>
<dt>已选条件:</dt>
<dd class="select-no">暂时没有选择过滤条件</dd>
</dl>
</li>
</ul>
<div id="results"></div>
<script>
//首先是筛选条件点击触发AJAX,tt是触发的按钮class
$('.tt').click(function(){
//获取当前触发按钮的id值
var targetid = $(this).attr('id');
//通过id值返回目标链接地址,比如 针织衫 ID=2,返回针织衫 页面的真实链接地址
switch(targetid)
{
case '1':
targeturl = 'xxxxx.html'
break;
case '2':
targeturl = 'xxxxx.html'
break;
//.......多少个选项一一对应多少个链接
default:
targeturl = 'xxxxx.html'
}
$.ajax({
url: targeturl, //ajax 目标链接 也就是你要无刷新呈现的页面地址
cache: false,
success: function(html){
$("#results").append(html); //把要呈现的页面装入到 id=results 这个div内
}
});
})
</script>
</body>
</html>
2016-07-15 · 知道合伙人互联网行家
我知道,但是不会jquery和ajax,所以具体怎么写,不会,如果你会,请帮我写出来,谢谢
把这个改一下就可以了
给每个列表添加一个统一标记就可以了,所有dl加上一个sel的class,以及每个选中的加check的标记
<dl id="select2" class="neicun"><dt>内存</dt><dd class="check">512M</dd>
<dl id="select1" class="pinpai"><dt>品牌</dt><dd class="check">XXX</dd>
// jquery事件绑定
$('.select dd').click(function(){
$(this).parent().find('.check').removeClass('check');
$(this).addClass('check');
})
// www.hi-docs.com/jquery/click.html
ajax把每个check的值拼起来就可以了