实现点击好评数动态增加数据
在views.py中添加视图函数
def praise_or_criticize(request: HttpResponse) ->HttpResponse:
pass
在urls.py中添加链接
from polls.views import show_subject, show_teacher, praise_or_criticize
urlpatterns = [
path('admin/', admin.site.urls),
path('',show_subject),
path('teachers/',show_teacher),
path('praise/',praise_or_criticize),
path('criticize/',praise_or_criticize),
]
修改teachers.html
<div class="comment">
<a href="/praise/?sno={{ subjects.no }}&tno={{ teacher.no }}">好评</a> (<strong>{{ teacher.gcount }}</strong>)
<a href="">差评</a> (<strong>{{ teacher.bcount }}</strong>)
#触发逻辑,点击好评按钮,会请求/praise这个url,这个url请求praise函数
#链接/?变量名={{ 查询参数 }}&变量名={{ 查询参数 }} 可以有多个参数,用&符号分隔开
修改view.py
def praise_or_criticize(request: HttpResponse) ->HttpResponse:
try:
sno = request.GET.get('sno') #会拿到学科的编号,方便后面重定向页面
tno = request.GET.get('tno') #拿到老师的编号
teacher = Teacher.objects.get(no=tno) #根据传入的sno值查询老师
if request.path == '/praise/': #request.path 会得到请求的url
teacher.gcount += 1 #给老师的好评字段+1
else:
teacher.bcount += 1 #给老师差评字段+1
teacher.save() #更新字段
return redirect(f'/teachers/?sno={sno}') #重定向到所属学科的页面
except (ValueError,Teacher.DoesNotExist):
return redirect('/') #捕获异常,重定向到首页
#此方法效率非常低,可采取Ajax前端异步请求技术(浏览器可以向服务器发起一个异步请求(不会中断当前的用户体验)）
----------------------------------------------------------------------------------------------------------------------------
采用Ajax异步请求进行局部刷新
def praise_or_criticize(request: HttpResponse) ->HttpResponse:
try:
tno = request.GET.get('tno')
teacher = Teacher.objects.get(no=tno)
if request.path.startswith('/praise/'):
teacher.gcount += 1
count = teacher.gcount
else:
teacher.bcount += 1
count = teacher.bcount
teacher.save()
data = {'code':20000,'mesg':'投票成功','count':count}
except (ValueError,Teacher.DoesNotExist):
data = {'code':20001,'mesg':'投票失败'}
return HttpResponse(json.dumps(data),content_type='application/json')
#return JsonResponse(data)也可以,注意需要导入
#修改teachers.html文件
<div class="comment">
<a href="/praise/?tno={{ teacher.no }}">好评</a> (<strong>{{ teacher.gcount }}</strong>)
<a href="/criticize/?tno={{ teacher.no }}">差评</a> (<strong>{{ teacher.bcount }}</strong>)
</div>
#做完此步骤可以单独请求 http://127.0.0.1:8001/praise/?tno=1 实现局部票数的增加
#在teachers.html <body>标签前一步添加原生js代码
</div>
<script>
//document对象的querySelector / querySelectorAll 方法可以通过CSS选择器获取页面元素
let anchors = document.querySelectorAll('.comment>a')
//通过循环为a标签绑定点击事件回调函数
for (let i = 0; i < anchors.length; ++i ) {
//addEventListener添加事件监听器(绑定事件回调函数)
anchors[i].addEventListener('click',(evt) => {
//阻止事件默认行为(点击a标签不会刷新页面)
evt.preventDefault()
//获取异步请求的地址(URL)
let url = evt.target.href
//向服务器发出异步请求 Promise对象
fetch(url).then(resp => resp.json()).then(json => {
//获取到服务器返回的JSON格式的数据,对页面进行局部刷新
if (json.code === 20000){
//通过a标签的nextElementSibling属性获取旁边的strong标签
let strong = evt.target.nextElementSibling
strong.textContent = json.count
}else{
alert(json.mesg)
}
})
})
}
</script>
</body>
#做完这步可实现局部刷新
#可以用jQuery库可以简化前端页面（效果同上）
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>
$('.comment>a').on('click',(evt) => {
evt.preventDefault()
let url = $(evt.target).attr('href')
$.getJSON(url,(json) => {
if (json.code === 20000){
$(evt.target).next().text(json.count)
}else {
alert(json.mesg)
}
})
})
</script>
712
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
