实现查询功能,提交GET请求到后端

目标:

实现页面上选择框,输入内容等内容捕捉后,拼接成查询字符串,提交GET请求到后端。

实现逻辑:

前端部分:

后端部分:

背景知识:

JQUERY:

indexOf() 和 lastIndexOf() 方法返回的都是指定的子串在另一个字符串中的位置,如果没有找不到子串,则返回 -1。

淡入淡出:

选择包含这个类属性的表情,让它出现。
$(".filters").fadeIn();

同上,就是让它消失
$(".filters").fadeOut();

这句是替换字符串。其实就是用search做一个标记。
search.replace("?search=true", "")

//JQUERY部分:

// 打开高级搜索
    $(".open-search").click(function(){
        console.log(window.location);
        var search = window.location.search;
        var pathname = window.location.pathname;
        if(search.indexOf("search") == -1){
            var query = search.substr(1, search.length);
            if(query){
                search = "?search=true&" + query;
            }else{
                search = "?search=true";
            }
        }
        console.log(search);
        $(".filters").fadeIn();
        setTimeout(function(){
            window.location.href = pathname + search;
        }, 500);
    });

    // 关闭高级搜索
    $(".close-search").click(function(){
        var search = window.location.search;
        var pathname = window.location.pathname;
        if(search.indexOf("search") != -1){
            if(search.indexOf("&") == -1){
                search = search.replace("?search=true", "");
            }else{
                search = search.replace("search=true&", "");
            }
        }
        $(".filters").fadeOut();
        setTimeout(function(){
            window.location.href = pathname + search;
        }, 500)
    });
#VIEW逻辑
class CustomerMessage(View):
    """
    用户消息列表
    """
    template = "customer/message_list.html"
    def get(self, request, *args, **kwargs):
        search = request.GET.get("search")
        return render_to_response(self.template,
                                  context_instance=RequestContext(request, locals()))

模板HTML里


<tr class="filters {% if not search %}hidden{% endif %}">
  <td colspan="10">
   <div class="pull-right">
    <button type="button" class="btn btn-default search-button" id="id-search-customer-message">搜索</button>
    <button type="button" class="btn btn-default search-button" id="id-clear-search-filter">重置</button>
   </div>
  </td>
</tr>
發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章