请教jquery+php实现无刷新条件筛选应该怎么做

html部分:<ulclass="select"><liclass="select-list"><dlid="select1"><dt>上装:</dt><ddclass=... html部分:
<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的
展开
 我来答
jinzhu56
2016-07-19 · 超过75用户采纳过TA的回答
知道小有建树答主
回答量:149
采纳率:0%
帮助的人:139万
展开全部
  1. 确保引入JQ库

  2. 无刷新JQ用的是AJAX,AJAX运行建立在服务器的基础上,一定要在服务器运行的情况下测试

  3. 你的代码要稍微调整下,原页面上不能出现a标签的链接,因为点击后直接就跳转了

  4. 以下是代码部分

    <!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 · 知道合伙人互联网行家
龙氏风采
知道合伙人互联网行家
采纳数:5849 获赞数:12816
从事互联网运营推广,5年以上互联网运营推广经验,丰富的实战经

向TA提问 私信TA
展开全部
用php+ajax来实现无刷新筛选
追问
我知道,但是不会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的值拼起来就可以了

已赞过 已踩过<
你对这个回答的评价是?
评论 收起
推荐律师服务: 若未解决您的问题,请您详细描述您的问题,通过百度律临进行免费专业咨询

为你推荐:

下载百度知道APP,抢鲜体验
使用百度知道APP,立即抢鲜体验。你的手机镜头里或许有别人想知道的答案。
扫描二维码下载
×

类别

我们会通过消息、邮箱等方式尽快将举报结果通知您。

说明

0/200

提交
取消

辅 助

模 式