Django+xadmin打造在线教育平台（十一）

十、首页模块

1、首页展示

（1）、视图函数

def index(request):
    all_banners = BannerInfo.objects.all().order_by('-add_time')[:5]
    banner_courses = CourseInfo.objects.filter(is_banner=True)[:3]
    all_courses = CourseInfo.objects.filter(is_banner=False)[:6]
    all_orgs = OrgInfo.objects.all()[:15]
    return render(request, 'index.html', {
        'all_banners': all_banners,
        'bannner_courses': banner_courses,
        'all_courses': all_courses,
        'all_orgs': all_orgs
    })

（2）、前端页面

{% extends 'base.html' %}
{% load staticfiles %}
{% block title %}
    首页 — 谷粒教育
{% endblock %}

{% block content %}
    <div class="banner">
            <div class="wp">
                <div class="fl">
                    <div class="imgslide">
                        <ul class="imgs">
                            {% for banner in  all_banners %}
                                 <li>
                                    <a href="{{ banner.url }} ">
                                        <img width="1200" height="478" src="{{ MEDIA_URL }}{{ banner.image }}" />
                                    </a>
                                </li>
                            {% endfor %}

                        </ul>
                    </div>
                    <div class="unslider-arrow prev"></div>
                    <div class="unslider-arrow next"></div>
                </div>

                </div>


            </div>
    <section>
        <div class="wp">
            <ul class="feature">
                <li class="feature1">
                    <img class="pic" src="{% static 'images/feature5.png' %}"/>
                    <p class="center">专业权威</p>
                </li>
                <li class="feature2">
                    <img class="pic" src="{% static 'images/feature5.png' %}"/>
                    <p class="center">课程最新</p>
                </li>
                <li class="feature3">
                    <img class="pic" src="{% static 'images/feature5.png' %}"/>
                    <p class="center">名师授课</p>
                </li>
                <li class="feature4">
                    <img class="pic" src="{% static 'images/feature5.png' %}"/>
                    <p class="center">数据真实</p>
                </li>
            </ul>
        </div>
    </section>
    <section>
        <div class="module">
            <div class="wp">
                <h1>公开课程</h1>
                <div class="module1 eachmod">
                    <div class="module1_1 left">
                        <img width="228" height="614" src="{% static 'images/module5_1.jpg' %}"/>
                        <p class="fisrt_word">名师授课<br/>专业权威</p>
                        <a class="more" href="{% url 'courses:course_list' %}">查看更多课程 ></a>
                    </div>
                    <div class="right group_list">
                        <div class="module1_2 box">
                            <div class="imgslide2">
                                <ul class="imgs">
                                    {% for banner in all_banners %}
                                    <li>
                                        <a href="{% url 'courses:course_detail' banner.id %}">
                                            <img width="470" height="300" src="{{ MEDIA_URL }}{{ banner.image }}" />
                                        </a>
                                    </li>
                                    {% endfor %}
                                </ul>
                            </div>
                            <div class="unslider-arrow2 prev"></div>
                            <div class="unslider-arrow2 next"></div>
                        </div>
                            {% for cours in all_courses %}
                                <div class="module1_{{ forloop.counter|add:"2" }} box">
                                <a href="{% url 'courses:course_detail' cours.id %}">
                                    <img width="233" height="190" src="{{ MEDIA_URL }}{{ cours.image }}"/>
                                </a>
                                <div class="des">
                                    <a href="{% url 'courses:course_detail' cours.id %}">
                                        <h2 title="{{ cours.name }}">{{ cours.name }}</h2>
                                    </a>
                                    <span class="fl">难度：<i class="key">
                                        {% if cours.level == 'gj' %}高级
                                        {% elif cours.level == 'zj' %} 中级
                                        {% else %} 初级
                                        {% endif %}
                                    </i></span>
                                    <span class="fr">学习人数：{{ cours.study_num }}</span>
                                </div>
                                <div class="bottom">
                                    <span class="fl" title="{{ cours.orginfo.name }}">{{ cours.orginfo.name }}</span>
                                    <span class="star fr">{{ cours.love_num }}</span>
                                </div>
                            </div>
                            {% endfor %}

                    </div>
                </div>
            </div>
        </div>
    </section>
    <section>
        <div class="module greybg">
            <div class="wp">
                <h1>课程机构</h1>
                <div class="module3 eachmod">
                    <div class="module3_1 left">
                        <img width="228" height="463" src="{% static 'images/module6_1.jpg' %}"/>
                        <p class="fisrt_word">名校来袭<br/>权威认证</p>
                        <a class="more" href="{% url 'orgs:org_list' %}">查看更多机构 ></a>
                    </div>
                    <div class="right">
                        <ul>
                            {% for org in all_orgs %}
                                <li {% if forloop.counter|divisibleby:"5" %} class="five" {% endif %}>
                                    <a href="{% url 'orgs:org_detail' org.id %}">
                                        <div class="company">
                                            <img width="184" height="100" src="{{ MEDIA_URL }}{{ org.image }}"/>
                                            <div class="score">
                                                <div class="circle">
                                                    <h2>全国知名</h2>
                                                </div>
                                            </div>
                                        </div>
                                        <p><span class="key" title="{{ org.name }}">{{ org.name }}</span></p>
                                    </a>
                                </li>
                            {% endfor %}
                        </ul>
                    </div>
                </div>
            </div>
        </div>
    </section>
{% endblock %}

index.html

2、全局模糊搜索

全局模糊搜索用到了Q方法，在base中写js代码，拼接url，并发起请求，

<script>
    $(function(){
        $("#jsSearchBtn").click(function () {
            var search_type = $('#jsSelectOption').attr('data-value');
            var key_word = $('#search_keywords').val();
            var url = '';
            if(search_type == 'org'){
                url = "{% url 'orgs:org_list' %}"
            }else if(search_type == 'course'){
                url = "{% url 'courses:course_list' %}"
            }else{
                url = "{% url 'orgs:teacher_list' %}"
            }
            url = url + '?keyword='+ key_word;
            window.location.href=url  

        });
    })
</script>

<!DOCTYPE html>
{% load staticfiles %}
<html>

<head>
    <meta charset="UTF-8">
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=Edge,chrome=1" >
    <title>{% block title %}

    {% endblock %}</title>
    <link rel="stylesheet" type="text/css" href="{% static 'css/reset.css' %}">
    <link rel="stylesheet" type="text/css" href="{% static 'css/animate.css' %}">
    <link rel="stylesheet" type="text/css" href="{% static 'css/style.css' %}">
    {% block mycss %}

    {% endblock %}
    <script src="{% static 'js/jquery.min.js' %}" type="text/javascript"></script>
    <script src="{% static 'js/jquery-migrate-1.2.1.min.js' %}" type="text/javascript"></script>

</head>
<body>
<section class="headerwrap">
    <header>
        <div  class=" header header2">
             <div class="top">
                <div class="wp">
                    <div class="fl"><p>服务电话：<b>8888888</b></p></div>
                    <!--登录后跳转-->

                        {% if request.user.is_authenticated %}
                            <div class="personal">
                            <dl class="user fr">
                                <dd>{{ request.user.username }}<img class="down fr" src="{% static 'images/top_down.png' %}"/></dd>
                                <dt><img width="20" height="20" src="{{ MEDIA_URL }}{{ request.user.image }}"/></dt>
                            </dl>
                            <div class="userdetail">
                                <dl>
                                    <dt><img width="80" height="80" src="{{ MEDIA_URL }}{{ request.user.image }}"/></dt>
                                    <dd>
                                        <h2>{{ request.user.nick_name }}</h2>
                                        <p>{{ request.user.username }}</p>
                                    </dd>
                                </dl>
                                <div class="btn">
                                    <a class="personcenter fl" href="{% url 'users:user_info' %}">进入个人中心</a>
                                    <a class="fr" href="{% url 'users:logout' %}">退出</a>
                                </div>
                            </div>
                        </div>
                            <a href="{% url 'users:user_message' %}">
                            <div class="msg-num"><span id="MsgNum">{{ request.user.get_msg_counter }}</span></div>
                        </a>
                        {% else %}
                            <a style="color:white" class="fr registerbtn" href="{% url 'users:register' %}">注册</a>
                            <a style="color:white" class="fr loginbtn" href="{% url 'users:login' %}">登录</a>

                        {% endif %}

                </div>
            </div>
            {% block middle %}
            <div class="middle">
                <div class="wp">
                    <a href="/"><img class="fl" src="{% static 'images/logo1.png' %}"/></a>
                    <div class="searchbox fr">
                        <div class="selectContainer fl">
                            <span class="selectOption" id="jsSelectOption" data-value="course">
                                公开课
                            </span>
                            <ul class="selectMenu" id="jsSelectMenu">
                                <li data-value="course">公开课</li>
                                <li data-value="org">课程机构</li>
                                <li data-value="teacher">授课老师</li>
                            </ul>
                        </div>
                        <input id="search_keywords" class="fl" type="text" value="" placeholder="请输入搜索内容"/>
                        <img class="search_btn fr" id="jsSearchBtn" src="{% static 'images/search_btn.png' %}"/>
                    </div>
                </div>
            </div>
            <nav>
                <div class="nav">
                    <div class="wp">
                        <ul>
                            <li {% if request.path == '/' %} class="active" {% endif %}><a href="/">首页</a></li>
                            <li {% if request.path|slice:':9' == '/courses/' %} class="active" {% endif %}>
                                <a href="{% url 'courses:course_list' %}">
                                    公开课<img class="hot" src="{% static 'images/nav_hot.png' %}">
                                </a>
                            </li>
                            <li {% if request.path|slice:':13' == '/orgs/teacher' %} class="active" {% endif %}>
                                <a href="{% url 'orgs:teacher_list' %}">授课教师</a>
                            </li>
                            <li {% if request.path|slice:':9' == '/orgs/org' %} class="active" {% endif %}><a href="{% url 'orgs:org_list' %}">授课机构</a></li>
                        </ul>
                    </div>
                </div>
            </nav>
            {% endblock %}
            </div>
    </header>
</section>
{% block content %}

{% endblock %}

{% block footer %}
<footer>
        <div class="footer">
            <div class="wp">
                <ul class="cont">
                    <li class="logo"><a href=""><img src="{% static 'images/logo1.png' %}"/></a></li>
                    <li class="code"><img src="{% static 'images/code.jpg' %}"/><p class="center">扫描关注微信</p></li>
                    <li class="third"><img class="fl" src="{% static 'images/tell.png' %}"/><p class="tell">88888888</p><p class="time">周一至周日 9:00-18:00</p></li>
                </ul>

            </div>
            <p class="line"></p>
            <div class="wp clear">
                <span class="fl">? 2012 www.atguigu.com谷粒教育-在线学习交流平台 保留所有权利</span>
                <span class="fr">copyright ? 2012 ICP备案证书号：蜀ICP备xxxxx号-1</span>
            </div>
        </div>
    </footer>
{% endblock %}


<section>
    <ul class="sidebar">
        <li class="qq">
            <a target="_blank" href="/"></a>
        </li>
        <li class="totop"></li>
    </ul>
</section>
<script src="{% static 'js/selectUi.js' %}" type='text/javascript'></script>
<script src="{% static 'js/deco-common.js' %}" type='text/javascript'></script>
<script type="text/javascript" src="{% static 'js/plugins/laydate/laydate.js' %}"></script>
<script src="{% static 'js/plugins/layer/layer.js' %}"></script>
<script src="{% static 'js/plugins/queryCity/js/public.js' %}" type="text/javascript"></script>
<script src="{% static 'js/unslider.js' %}" type="text/javascript"></script>
<script src="{% static 'js/plugins/jquery.scrollLoading.js' %}"  type="text/javascript"></script>
<script src="{% static 'js/deco-common.js' %}"  type="text/javascript"></script>
<script type="text/javascript" src="{% static 'js/index.js' %}"></script>
<script>
    $(function(){
        $("#jsSearchBtn").click(function () {
            var search_type = $('#jsSelectOption').attr('data-value');
            var key_word = $('#search_keywords').val();
            var url = '';
            if(search_type == 'org'){
                url = "{% url 'orgs:org_list' %}"
            }else if(search_type == 'course'){
                url = "{% url 'courses:course_list' %}"
            }else{
                url = "{% url 'orgs:teacher_list' %}"
            }
            url = url + '?keyword='+ key_word;
            window.location.href=url

        });
    })
</script>
{% block myjs %}
{% endblock %}
</body>
</html>

base.html

后端分别在机构列表，讲师列表以及课程列表中分别加入查询方法。

并在对应的前端分页代码中加入相应的关键字keyword。

def org_list(request):
    all_orgs = OrgInfo.objects.all()  # 获取所有的机构
    all_citys = CityInfo.objects.all()   # 获取所有的城市
    sort_orgs = all_orgs.order_by('-love_num')[:3]   # 对机构排序并取三个

    # 全局搜索功能过滤
    keyword = request.GET.get('keyword', '')
    if keyword:
        # 在全局进行模糊查询
        all_orgs = all_orgs.filter(Q(name__icontains=keyword)|Q(desc__icontains=keyword)|Q(detail__icontains=keyword))


    # 按照机构类别过滤
    cate = request.GET.get('cate', '')
    if cate:
        all_orgs = all_orgs.filter(category=cate)

    # 按照所在地区过滤筛选
    cityid = request.GET.get('cityid', '')
    if cityid:
        all_orgs = all_orgs.filter(cityinfo_id=int(cityid))   # 一对多，多的一方查询id

    # 排序
    sort = request.GET.get('sort', '')

    if sort:
        all_orgs = all_orgs.order_by('-'+sort)

    # 分页功能
    pagenum = request.GET.get('pagenum', '')
    pa = Paginator(all_orgs, 4)
    try:
        pages = pa.page(pagenum)
    except PageNotAnInteger:
        pages = pa.page(1)
    except EmptyPage:
        pages = pa.page(pa.num_pages)

    return render(request, 'orgs/org-list.html', {
        'all_orgs': all_orgs,
        'all_citys': all_citys,
        'sort_orgs': sort_orgs,
        'pages': pages,
        'cate': cate,
        'cityid': cityid,
        'sort': sort,
        'keyword': keyword,
    })

def teacher_list(request):
    all_teachers = TeacherInfo.objects.all()
    sort_teachers = all_teachers.order_by('-love_num')[:2]

    # 全局搜索功能过滤
    keyword = request.GET.get('keyword', '')
    if keyword:
        # 在全局进行模糊查询
        all_teachers = all_teachers.filter(
            Q(name__icontains=keyword))

    sort = request.GET.get('sort')
    if sort:
        all_teachers = all_teachers.order_by('-' + sort)

    # 分页
    pagenum = request.GET.get('pagenum', '')
    pa = Paginator(all_teachers, 2)
    try:
        pages = pa.page(pagenum)
    except PageNotAnInteger:
        pages = pa.page(1)
    except EmptyPage:
        pages = pa.page(pa.num_pages)

    return render(request, 'orgs/teachers-list.html', {
        'all_teachers': all_teachers,
        'sort_teachers': sort_teachers,
        'pages': pages,
        'sort': sort,
        'keyword': keyword
    })

def course_list(request):
    all_course = CourseInfo.objects.all()
    recommond_course = all_course.order_by('-add_time')[:3]

    # 全局搜索功能过滤
    keyword = request.GET.get('keyword', '')
    if keyword:
        # 在全局进行模糊查询
        all_course = all_course.filter(
            Q(name__icontains=keyword) | Q(desc__icontains=keyword) | Q(detail__icontains=keyword))

    sort = request.GET.get('sort', '')
    if sort:
        all_course = all_course.order_by('-'+sort)

    # 分页功能
    pagenum = request.GET.get('pagenum', '')
    pa = Paginator(all_course, 3)
    try:
        pages = pa.page(pagenum)
    except PageNotAnInteger:
        pages = pa.page(1)
    except EmptyPage:
        pages = pa.page(pa.num_pages)

    return render(request, 'courses/course-list.html', {
        'all_course': all_course,
        'recommond_course': recommond_course,
        'pages': pages,
        'sort': sort,
        'keyword': keyword
    })

{% extends 'base.html' %}
{% block title %}
公开课列表 - 谷粒教育网
{% endblock %}
{% block content %}
    <section>
        <div class="wp">
            <ul  class="crumbs">
                <li><a href="/">首页</a>></li>
                <li>公开课</li>
            </ul>
        </div>
    </section>
    <section>
    <div class="wp">
        <div class="list" style="margin-top:0;">
            <div class="left layout">
                <div class="head">
                    <ul class="tab_header">
                        <li {% if sort == '' %}class="active"{% endif %}><a href="?sort=">最新 </a></li>
                        <li {% if sort == 'click_num' %}class="active"{% endif %}><a href="?sort=click_num" >最热门</a></li>
                        <li {% if sort == 'study_num' %}class="active"{% endif %}><a href="?sort=study_num">参与人数</a></li>
                    </ul>
                </div>
                <div id="inWindow">
                    <div class="tab_cont " id="content">
                    <div class="group_list">
                        {% for course in pages %}
                            <div class="box">
                                <a href="{% url 'courses:course_detail' course.id %}">
                                    <img width="280" height="350" class="scrollLoading" src="{{ MEDIA_URL }}{{ course.image }}"/>
                                </a>
                                <div class="des">
                                    <a href="{% url 'courses:course_detail' course.id  %}">
                                        <h2>{{ course.name }}</h2>
                                    </a>
                                    <span class="fl">时长：<i class="key">{{ course.study_time }}</i></span>
                                    <span class="fr">学习人数：{{ course.study_num }}</span>
                                </div>
                                <div class="bottom">
                                    <a href="{% url 'courses:course_detail' course.id %}"><span class="fl">{{ course.orginfo.name }}</span></a>
                                    <span class="star fr  notlogin
                                        " data-favid="15">
                                        {{ course.love_num }}
                                    </span>
                                </div>
                            </div>
                        {% endfor %}
                    </div>
                     <div class="pageturn">
            <ul class="pagelist">
                {% if pages.has_previous %}
                <li class="long"><a href="?pagenum={{ pages.previous_page_number }}&sort={{ sort }}&keyword={{ keyword }}">上一页</a></li>
                {% endif %}
                {% for num in pages.paginator.page_range %}
                <li {% if num == pages.number %} class="active" {% endif %}><a href="?pagenum={{ num }}&sort={{ sort }}&keyword={{ keyword }}">{{ num }}</a></li>
                {% endfor %}
                {% if pages.has_next %}
                <li class="long"><a href="?pagenum={{ pages.next_page_number }}&sort={{ sort }}&keyword={{ keyword }}">下一页</a></li>
                {% endif %}
            </ul>
        </div>
                </div>
                </div>
            </div>
            <div class="right layout">
                <div class="head">热门课程推荐</div>
                <div class="group_recommend">
                    {% for course in recommond_course %}
                    <dl>
                        <dt>
                            <a target="_blank" href="{% url 'courses:course_detail' course.id %}">
                                <img width="240" height="220" class="scrollLoading" src="{{ MEDIA_URL }}{{ course.image }}"/>
                            </a>
                        </dt>
                        <dd>
                            <a target="_blank" href="{% url 'courses:course_detail' course.id %}"><h2> {{ course.name }}</h2></a>
                            <span class="fl">难度：
                            <i class="key">
                                {% if course.level == 'cj' %}
                                    初级
                                {% elif course.level == 'zj' %}
                                    中级
                                {% else %}
                                    高级
                                {% endif %}
                            </i>
                            </span>
                        </dd>
                    </dl>
                    {% endfor %}
                </div>
            </div>
        </div>
    </div>
</section>
{% endblock %}

course-list.html

{% extends 'base.html' %}
{% block title %}
课程讲师 - 谷粒教育网
{% endblock %}
{% block content %}
    <section>
        <div class="wp">
            <ul  class="crumbs">
                <li><a href="/">首页</a>></li>
                <li>课程讲师</li>
            </ul>
        </div>
    </section>

    <section>
    <div class="wp butler_list_box list">
    <div class='left'>
        <div class="butler_list layout">
            <div class="head">
                <ul class="fl tab_header">
                    <li {% if sort == '' %} class="active" {% endif %}><a href="?sort=">全部</a> </li>
                    <li {% if sort == 'click_num' %} class="active" {% endif %}><a href="?sort=click_num">人气 &#8595;</a></li>
                </ul>
                <div class="fr butler-num">共<span class="key">{{ all_teachers.count }}</span>人&nbsp;&nbsp;&nbsp;</div>
            </div>
                {% for teacher in pages %}
                <dl class="des">
                    <dt>
                        <a href="{% url 'orgs:teacher_detail' teacher.id %}">
                            <div class="picpic">
                                <img width="100" height="100" class="scrollLoading" src="{{ MEDIA_URL }}{{ teacher.image }}"/>
                            </div>
                        </a>
                        <div class="btn">
                            <div class="fr btn2 bdsharebuttonbox">
                                <span class="fl">分享</span>
                                <a href="#" class="bds_more" data-cmd="more"></a>
                            </div>
                        </div>
                    </dt>
                    <dd>
                        <a href="{% url 'orgs:teacher_detail' teacher.id %}">
                            <h1>{{ teacher.name }}<span class="key picbig">金牌讲师</span></h1>
                        </a>
                        <ul class="cont">
                            <li>工作年限：<span>{{ teacher.work_year }}年</span></li>
                            <li>工作职位：<span>{{ teacher.work_position }}</span></li>
                            <li>就职公司：<span>{{ teacher.work_company.name }}&nbsp;</span></li>
                            <li>年龄：<span>{{ teacher.age }}岁</span></li>
                            <li>教学特点：<span>{{ teacher.work_style }}</span></li>
                        </ul>
                    </dd>
                    <a class="buy buyservice" href="{% url 'orgs:teacher_detail' teacher.id %}"><br/>查看<br/>详情</a>
                </dl>
                {% endfor %}



        </div>
         <div class="pageturn">
            <ul class="pagelist">
                {% if pages.has_previous %}
                <li class="long"><a href="?pagenum={{ pages.previous_page_number }}&sort={{ sort }}&keyword={{ keyword }}">上一页</a></li>
                {% endif %}
                {% for num in pages.paginator.page_range %}
                <li {% if num == pages.number %} class="active" {% endif %}><a href="?pagenum={{ num }}&sort={{ sort }}&keyword={{ keyword }}">{{ num }}</a></li>
                {% endfor %}
                {% if pages.has_next %}
                <li class="long"><a href="?pagenum={{ pages.next_page_number }}&sort={{ sort }}&keyword={{ keyword }}">下一页</a></li>
                {% endif %}
            </ul>
        </div>
    </div>
    <div class="right layout">
        <div class="head">讲师排行榜</div>
            {% for teacher in sort_teachers %}
            <dl class="des">
                <span class="num fl">{{ forloop.counter }}</span>
                <a href="{% url 'orgs:teacher_detail' teacher.id %}">
                    <dt>
                        <img width="50" height="50" class="scrollLoading"  src="{{ MEDIA_URL }}{{ teacher.image }}"/>
                    </dt>
                </a>
                <dd>
                    <a href="{% url 'orgs:teacher_detail' teacher.id %}">
                        <h1 title="{{ teacher.name }}">{{ teacher.name }}</h1>
                    </a>
                    <p>工作年限：<span>{{ teacher.work_year }}年</span></p>
                </dd>
            </dl>
            {% endfor %}


    </div>
    </div>
</section>
{% endblock %}

teacher-list.html

{% extends 'base.html' %}
{% load staticfiles %}
{% block title %}
    课程机构列表 - 谷粒教育网
{% endblock %}
{% block content %}
    <section>
        <div class="wp">
            <ul  class="crumbs">
                <li><a href="{% url 'index' %}">首页</a>></li>
                <li>课程机构</li>
            </ul>
        </div>
    </section>
    <section>
    <div class="wp butler_list_box list">
    <div class='left'>
        <div class="listoptions">
            <ul>
                <li>
                    <h2>机构类别</h2>
                    <div class="cont">
                        <a href="?&cityid={{ cityid }}&sort={{ sort }}"><span {% if cate == "" %} class="active2" {% endif %}>全部</span></a>

                            <a href="?cate=pxjg&cityid={{ cityid }}&sort={{ sort }}"><span {% if cate == "pxjg" %} class="active2" {% endif %}>培训机构</span></a>

                            <a href="?cate=gx&cityid={{ cityid }}&sort={{ sort }}"><span {% if cate == "gx" %} class="active2" {% endif %}>高校</span></a>

                            <a href="?cate=gr&cityid={{ cityid }}&sort={{ sort }}"><span {% if cate == "gr" %} class="" {% endif %}>个人</span></a>

                    </div>
                </li>
                <li>
                    <h2>所在地区</h2>
                    <div class="more">更多</div>
                    <div class="cont">
                        <a href="?"><span {% if cityid == "" %}class="active2" {% endif %}>全部</span></a>
                            {% for city in all_citys %}
                                <a href="?cityid={{ city.id }}&sort={{ sort }}"><span {% if cityid == city.id|stringformat:"i" %} class="active2" {% endif %}>{{ city }}</span></a>
                            {% endfor %}
                    </div>
                </li>
            </ul>
        </div>
        <div class="all">共<span class="key">{{ all_orgs.count }}</span>家</div>
        <div class="butler_list company list">
        <div class="layout">
            <div class="head">
                <ul class="tab_header">
                    <li {% if sort == '' %} class="active" {% endif %}><a href="?cityid={{ cityid }}&cate={{ cate }}">全部</a> </li>
                    <li {% if sort == 'study_num' %} class="active" {% endif %}><a href="?sort=study_num&cityid={{ cityid }}&cate={{ cate }}">学习人数 &#8595;</a></li>
                    <li {% if sort == 'course_num' %} class="active" {% endif %}><a href="?sort=course_num&cityid={{ cityid }}&cate={{ cate }}">课程数 &#8595;</a></li>
                </ul>
            </div>
            {% for org in pages %}
                <dl class="des difdes">
                    <dt>
                        <a href="{% url 'orgs:org_detail' org.id %}">
                            <img width="200" height="120" class="scrollLoading" data-url="{{ MEDIA_URL }}{{ org.image }}"/>
                        </a>
                    </dt>
                    <dd>
                        <div class="clearfix">
                             <a href="{% url 'orgs:org_detail' org.id %}">
                                 <h1>{{ org.name }}</h1>
                                 <div class="pic fl">

                                         <img src="{% static 'images/authentication.png' %}"/>
                                         <img src="{% static 'images/gold.png' %}"/>

                                 </div>
                             </a>
                        </div>
                        <ul class="cont">
                            <li class="first"><p class="pic9">课程数：<span>{{ org.course_num }}</span></p><p class="c7">学习人数：<span>{{ org.study_num }}</span></p></li>
                            <li class="c8" style="padding-left:18px;">{{ org.address }}</li>
                            <li class="pic10" style="padding-left:18px;">经典课程：
                                {% for course in org.courseinfo_set.all|slice:"3" %}
                                    <a href="{% url 'courses:course_detail' course.id %}">{{ course.name }}</a>
                                {% endfor %}
                            </li>
                        </ul>
                    </dd>
                    <div class="buy start_groupbuy jsShowPerfect2" data-id="22"><br/>联系<br/>服务</div>
                </dl>
            {% endfor %}
        </div>
         <div class="pageturn">
            <ul class="pagelist">
                {% if pages.has_previous %}
                <li class="long"><a href="?pagenum={{ pages.previous_page_number }}&cate={{ cate }}&cityid={{ cityid }}&sort={{ sort }}&keyword={{ keyword }}">上一页</a></li>
                {% endif %}
                {% for num in pages.paginator.page_range %}
                <li {% if num == pages.number %} class="active" {% endif %}><a href="?pagenum={{ num }}&cate={{ cate }}&cityid={{ cityid }}&sort={{ sort }}&keyword={{ keyword }}">{{ num }}</a></li>
                {% endfor %}
                {% if pages.has_next %}
                <li class="long"><a href="?pagenum={{ pages.next_page_number }}&cate={{ cate }}&cityid={{ cityid }}&sort={{ sort }}&keyword={{ keyword }}">下一页</a></li>
                {% endif %}
            </ul>
        </div>
        </div>
    </div>
    <div class="right companyright">
            <div class="head">我要学习</div>
            <form class="rightform" id="jsStayForm" >
                <div>
                    <img src="{% static 'images/rightform1.png' %}"/>
                    <input type="text" name="name" id="companyName" placeholder="名字" maxlength="25" />
                </div>
                <div>
                    <img src="{% static 'images/rightform2.png' %}"/>
                    <input type="text" name="mobile" id="companyMobile" placeholder="联系电话"/>
                </div>
                <div>
                    <img src="{% static 'images/rightform3.png' %}"/>
                    <input type="text" name="course_name" id="companyAddress" placeholder="课程名" maxlength="50" />
                </div>
                <p class="error company-tips" id="jsCompanyTips"></p>
                <input class="btn" type="submit" id="jsStayBtn" value="立即咨询 >" />
            </form>
        </div>

        <div class="right companyrank layout">
            <div class="head">授课机构排名</div>
            {% for org in sort_orgs %}
                <dl class="des">
                    <dt class="num fl">{{ forloop.counter }}</dt>
                    <dd>
                        <a href="{% url 'orgs:org_detail' org.id %}"><h1>{{ org.name }}</h1></a>
                        <p>{{ org.cityinfo.name }}</p>
                    </dd>
                </dl>
            {% endfor %}
        </div>
        </div>
</section>
{% endblock %}
{% block myjs %}
    <script>
        $(function () {
            $('#jsStayBtn').click(function () {
                {# 如果拿的是非表单的元素用text(),如果表单元素用val #}
                var name = $('#companyName').val();
                var phone = $('#companyMobile').val();
                var course = $('#companyAddress').val();
                $.ajax({
                    type: 'POST',
                    url: '{% url 'operations:user_ask' %}',
                    data:{
                        "name": name,
                        "phone": phone,
                        "course":course,
                        csrfmiddlewaretoken: '{{ csrf_token }}'
                    },
                    success:function (callback) {
                        if(callback.status == 'ok'){
                            alert(callback.msg);
                            $('#jsCompanyTips').text();
                            $('#companyName').val();
                            $('#companyMobile').val();
                            $('#companyAddress').val();
                        }else{
                            alert(callback.msg);
                            $('#jsCompanyTips').text(callback.msg)
                        }
                    }
                });
                return false
            })
        })
    </script>
{% endblock %}

org-list.html

-------------------------------

-----