【Django Series - 04】数据的增删改：用户提交数据，验证数据的有效性并传输至后台（jQuery.post）

Django Series（Django2.1.2 + Anaconda3）

（一）安装并配置 Django 环境 ||| 基于 Django 进行 Web 开发

（二）Django 基础知识：语法、教程

（三）用户管理模块：创建用户、登录、退出

（四）数据的增删改：用户提交数据，验证数据的有效性并传输至后台（jQuery.post、jQuery.getJSON）

（五）基于 "xlsxwriter  + BytesIO"（Python3）生成 Excel 报表 ||| Python2 StringIO.StringIO()

---

说明：本系列教程根据最近实践过程进行整理、总结和分享。由于时间和精力有限，发表时内容分析部分可能不是很完整，后续有时间会慢慢补充。同时！！也希望感兴趣的同学可以提出一些细节问题和建议，我会根据这些问题进一步整理和完善哈。

更新日志：

20181019：发表第一版，主要以代码分享为主；知识点分析较为粗略。

---

知识点分析：

 

实现代码：

XXX.html

{% extends "base.html" %}
{% load staticfiles %}

{% block title %}
XXXX管理系统
{% endblock %}

{% block style %}
{% endblock %}

{% block content %}
<div>
    <table width="100%" border="0" cellpadding="0" cellspacing="0">
        <tr>
            <td width="17" valign="top" background="{% static 'images/mail_left_bg.gif' %}">
                <img src="{% static 'images/left_top_right.gif' %}" width="17" height="29" />
            </td>
            <td valign="top" background="{% static 'images/content_bg.gif' %}">
                <table width="100%" height="31" border="0" cellpadding="0" cellspacing="0" background="{% static 'images/content_bg.gif' %}">
                    <tr>
                        <td height="31">
                            <div class="title">其他费用：</div>
                        </td>
                    </tr>
                </table>
            </td>
            <td width="16" valign="top" background="{% static 'images/mail_right_bg.gif' %}">
                <img src="{% static 'images/nav_right_bg.gif' %}" width="16" height="29" />
            </td>
        </tr>

        <tr>
            <td valign="middle" background="{% static 'images/mail_left_bg.gif' %}">&nbsp;</td>
            <td valign="top" bgcolor="#F7F8F9">
                <table width="100%" border="0" align="center" cellpadding="0" cellspacing="0">
                    <tr>
                        <td colspan="2" valign="top">&nbsp;</td>
                        <td>&nbsp;</td>
                        <td valign="top">&nbsp;</td>
                    </tr>

                    <tr>
                        <td colspan="4" valign="top">
                            <table class="table table-bordered table-hover DataTable_class">
                                <thead>
                                     <tr>
                                        <th style="text-align: center;">工作令号</th>
                                        <th style="text-align: center;">项目名称</th>
                                        <th style="text-align: center;">其他费用类型</th>
                                        <th style="text-align: center;">其他费用款项</th>
                                        <th style="text-align: center;">发起者</th>
                                        <th style="text-align: center;">录入人员</th>
                                        <th style="text-align: center;">发起日期</th>
                                        <th style="text-align: center;">其他费用说明</th>
                                        <th style="text-align: center;">操作</th>
                                     </tr>
                                 </thead>

                                 <tbody>
                                 {% for others in OtherCost_list %}