目標:
實現頁面上選擇框,輸入內容等內容捕捉後,拼接成查詢字符串,提交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>