django - 简单网页

最新推荐文章于 2021-04-22 09:19:08 发布

原创最新推荐文章于 2021-04-22 09:19:08 发布 · 368 阅读

CC 4.0 BY-SA版权

本文介绍如何使用Django构建一个简单的网页，展示学生信息。内容包括定义路由`/stu/showStus/`，创建`show.html`模板，以及实现查看、删除和编辑学生信息的功能。通过定义URL和方法，页面上有一个获取所有学生信息的按钮，点击可显示信息，点击删除按钮可删除信息，编辑时弹出文本框提交修改。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

定义路由

/stu/showStus/
templates中定义一个页面：show.html

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>展示所有学生信息</title>
<!-- 链接js库 -->
<script type="text/javascript" src="/static/js/jquery.min.js"></script>
<script>
   $(function() {
      $('#showStus').click(function () {
        // 查找stu/student内容 ， 并将获得的对象传给msg  定义一个函数返给页面
        // msg对象一条一条的（表格的一行）
          $.get('/stu/student/', function (msg) {
              s= '<table><tr><td>ID</td><td>姓名</td><td>地址</td><td>操作</td></tr>'
               {#alert(msg)#}
               {#alert(msg.length)#}
              for(var i=0; i < msg.length;i+=1){
                  s += '<tr><td>'+ msg[i].id +'</td>\
                  <td>'+ msg[i].s_name +'</td>\
                  <td>' + msg[i].s_tel + '</td><td>\
                  // href中的内容意思不做处理，放置页面刷新
                  <a href="javascript:;" onclick="update_stu('+ msg[i].id +')">编辑</a>|\
                  <a href="javascript:;" onclick="del_stu('+ msg[i].id +')">删除</a></td> </tr>'
              }
              s += '</table>'
              $('#div_stus').html(s) 
              // 给页面中的div块填充内容 s
          }, 'json');
          // 采用json格式
      }) ;
   });
   // 点击删除按钮会访问下面这个函数, i只是个代号等同于msg[i].id
   function del_stu(i){
       csrf = $('input[name="csrfmiddlewaretoken"]').val()
       # 当点击删除时 用弹框打出 i 的值为前面的id
       {#alert(i)#}
       $.ajax({
           url:'/stu/student/' + i + '/',
           type:'delete',
           headers:{'X-CSRFToken':csrf},
           dataType:'json',
           success:function () {
               alert('删除成功');
           },
           error:function () {
               alert('删除失败')
           }
       });
   };

   // 点击编辑 弹出姓名 电话的文本框
   function update_stu(i){
       s= '姓名：<input type="text" id="s_name" name="name">\
       电话：<input type="text" id="s_tel" name="tel">\
       <input type="button" value="提交" onclick="update(' + i + ')">'
       // 给页面中的div块填充内容s
       $('#div_update_stus').html(s);
   }
   // 点击文本框提交按钮， 进行修改数据
   function update(i){
       csrf = $('input[name="csrfmiddlewaretoken"]').val()
       s_name=$('#s_name').val()
       s_tel=$('s_tel').val()
       // 采用ajax 修改内容
       $.ajax({
          url:'/stu/student/' + i + '/',
          type:'PATCH',
          data:{'s_name':s_name, 's_tel':s_tel},
          dataType:'json',
          headers:{'X-CSRFToken':csrf},
          success:function(msg){
              alert('修改成功')
          },
          error:function(msg){
              alert('修改失败')
          }
       });
   }
</script>
</head>
<body>
{% csrf_token %}
<input id="showStus" value="获取所有学生的信息" type="button">

<div id="div_stus"></div>
<div id="div_update_stus"></div>

</body>
</html>