Python从入门到精通day46

<?xml version="1.0" encoding="utf-8"?><message><from>Alice</from><to>Bob</to><content>Dinner is on me!</content></message>

{"from":"Alice","to":"Bob","content":"Dinner is on me!"}

from django.contrib import adminfrom django.urls import pathfrom vote import viewsurlpatterns = [    path('', views.show_subjects),    path('teachers/', views.show_teachers),    path('praise/', views.praise_or_criticize),    path('criticize/', views.praise_or_criticize),    path('admin/', admin.site.urls),]

defpraise_or_criticize(request):"""好评"""try:        tno = int(request.GET.get('tno'))        teacher = Teacher.objects.get(no=tno)if request.path.startswith('/praise'):            teacher.good_count += 1            count = teacher.good_countelse:            teacher.bad_count += 1            count = teacher.bad_count        teacher.save()        data = {'code': 20000, 'mesg': '操作成功', 'count': count}except (ValueError, Teacher.DoseNotExist):        data = {'code': 20001, 'mesg': '操作失败'}return JsonResponse(data)

<!DOCTYPE html><htmllang="en"><head><metacharset="UTF-8"><title>老师信息</title><style>#container {width: 80%;margin: 10px auto;        }.teacher {width: 100%;margin: 0 auto;padding: 10px0;border-bottom: 1px dashed gray;overflow: auto;        }.teacher>div {float: left;        }.photo {height: 140px;border-radius: 75px;overflow: hidden;margin-left: 20px;        }.info {width: 75%;margin-left: 30px;        }.infodiv {clear: both;margin: 5px10px;        }.infospan {margin-right: 25px;        }.infoa {text-decoration: none;color: darkcyan;        }</style></head><body><divid="container"><h1>{{ subject.name }}学科的老师信息</h1><hr>        {% if not teachers %}<h2>暂无该学科老师信息</h2>        {% endif %}        {% for teacher in teachers %}<divclass="teacher"><divclass="photo"><imgsrc="/static/images/{{ teacher.photo }}"height="140"alt=""></div><divclass="info"><div><span><strong>姓名：{{ teacher.name }}</strong></span><span>性别：{{ teacher.sex | yesno:'男,女' }}</span><span>出生日期：{{ teacher.birth }}</span></div><divclass="intro">{{ teacher.intro }}</div><divclass="comment"><ahref="/praise/?tno={{ teacher.no }}">好评</a>&nbsp;&nbsp;                    (<strong>{{ teacher.good_count }}</strong>)&nbsp;&nbsp;&nbsp;&nbsp;<ahref="/criticize/?tno={{ teacher.no }}">差评</a>&nbsp;&nbsp;                    (<strong>{{ teacher.bad_count }}</strong>)</div></div></div>        {% endfor %}<ahref="/">返回首页</a></div><scriptsrc="https://cdn.bootcss.com/jquery/3.4.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></body></html>

4. 核心优化说明

1. 1. 移除 a 标签 href 跳转：将href="/praise/?tno={{ teacher.no }}"改为href="javascript:;"，避免页面跳转，仅作为事件触发载体；
2. 2. 数据传递优化：通过data-tno属性存储教师编号，替代 URL 拼接，更优雅且易维护；
3. 3. this 指向绑定：使用bind(this)确保 Ajax 回调函数中可访问点击的按钮元素；
4. 4. 样式 / 体验优化：新增按钮 hover 样式、日期格式化，提升页面交互感；
5. 5. 异常处理：前端捕获后端返回的错误码，给出友好提示。

上面的前端代码中，使用了jQuery库封装的getJSON方法向服务器发送异步请求，如果不熟悉前端的jQuery库，可以参考《jQuery API手册》。

四、小结

本次实战完成了：

1. 1. Django 开发环境下静态资源的配置与加载；
2. 2. Ajax 核心原理与 JSON 数据格式的应用；
3. 3. 基于 jQuery 的 Ajax 异步请求实现无刷新投票功能；

至此，投票项目的核心交互功能已完成。下一章节将讲解用户登录认证，要求用户必须登录才能投票，并实现用户注册功能，进一步完善项目权限控制。

国内直接使用顶级AI工具

谷歌浏览器访问：https://www.nezhasoft.cloud/r/vMPJZr