前些天遇到一个需求，需求为：html动态生成的表格，需要增加一个select框去对内容进行筛选显示，选择对应的选项，表格中仅显示与该选项一致的数据
实现思路为：通过ajax传递select值，在后台获取新的数据后，将新数据传递回来
python代码
@login_required
def myhtml(request):
username = request.user.username
data = testtable.objects.filter(Actor=username)
htmldata = {
'username': username,
'data': data,
}
return render(request, 'myhtml.html', htmldata)
@login_required
def chooseproject(request):
'''选择具体项目'''
username = request.user.username
if request.is_ajax():
chooseproject = request.POST.get('chooseproject')
if chooseproject == 'All Projects':
data = testtable.objects.filter(Actor=username)
else:
data = testtable.objects.filter(
Q(ProjectName=chooseproject) & Q(Actor=username))
htmldata = {
'username': username,
'data': data,
}
return render(request, 'myhtml.html', htmldata)
jq代码:
$('#chooseproject').change(function(){
// 提取到所选择的内容
var project = $('#chooseproject').val();
$.ajax({
cache: false,
url: "chooseproject",
dataType: 'text',
type: 'POST',
async: false,
data: {
"chooseproject": project,
},
success: function (data) {
$('#thebody').html(data);
$(function(){
$('#chooseproject').val(project);
});
},
});
});
然而在代码执行到$('#thebody').html(data);时(thebody为body的id)，会出现html的css样式加载了两遍的情况
尝试将thebody改成thehtml(thehtml为html的id)，则会出现html的css样式无法加载的情况
在网上暂时未能找到相关解决方案