實現查詢功能，提交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>