teacher.html 2.2 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576777879
  1. <!DOCTYPE html>
  2. {% load staticfiles %}
  3. <html lang="en">
  4. <head>
  5. <meta charset="UTF-8">
  6. <title>讲师信息</title>
  7. <style>
  8. .container {
  9. width: 960px;
  10. margin: 0 auto;
  11. }
  12. .basic {
  13. width: 60%;
  14. float: left;
  15. }
  16. .potrait {
  17. width: 40%;
  18. float: left;
  19. }
  20. hr {
  21. clear: both;
  22. }
  23. .button {
  24. display: inline-block;
  25. width: 80px;
  26. height: 30px;
  27. background-color: red;
  28. color: white;
  29. font: 16px/30px Arial;
  30. text-decoration: none;
  31. text-align: center;
  32. }
  33. </style>
  34. </head>
  35. <body>
  36. <!-- 页面的显示逻辑 -->
  37. {% for x in teachers_list %}
  38. <div class="container">
  39. <div class="basic">
  40. <h1>{{ x.name }}老师</h1>
  41. <p><strong>讲师简介</strong></p>
  42. <p>{{ x.intro }}</p>
  43. <p><strong>教学理念</strong></p>
  44. <p>{{ x.motto }}</p>
  45. <a href="/good/{{ x.no }}" class="button">好评({{ x.gcount }})</a>
  46. <a href="/bad/{{ x.no }}" class="button">差评({{ x.bcount }})</a>
  47. </div>
  48. <div class="potrait">
  49. {% if x.photo %}
  50. <img src="{% static x.photo %}">
  51. {% endif %}
  52. </div>
  53. <hr>
  54. </div>
  55. {% endfor %}
  56. <script src="{% static 'js/jquery.min.js' %}"></script>
  57. <script>
  58. $(function() {
  59. $('.basic .button').on('click', function(evt) {
  60. evt.preventDefault();
  61. var $a = $(evt.target);
  62. var url = $a.attr('href');
  63. $.ajax({
  64. 'url': url,
  65. 'type': 'get',
  66. 'data': {},
  67. 'dataType': 'json',
  68. 'success': function(json) {
  69. if (json.code == 200) {
  70. $a.text(json.result);
  71. }
  72. },
  73. 'error': function() {}
  74. });
  75. });
  76. });
  77. </script>
  78. </body>
  79. </html>