目标:
实现页面上选择框,输入内容等内容捕捉后,拼接成查询字符串,提交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>