Django 用ajax写一个测序数据管理的页面

页面展示如下，数据框中输入数据路径，点击添加数据后，数据在后台进行下载，前端页面显示添加成功弹窗，然后返回刷新后的列表页面。

image.png

页面展示的代码：

html端：主要是要写<form id="formAdd">，这个id用来后面给js绑定点击事件。

<div class="panel panel-default">
       <div class="panel-heading">表单</div>
       <div class="panel-body">
           <form id="formAdd">
               <div class="clearfix">
                   {% for field in form %}
                   <div class="col-xs-6">
                       <div class="form-group" style="position: relative; margin-bottom: 20px;">
                           <label>{{ field.label }}</label>
                           {{ field }}
                           <span class="error-msg" style="color:red; position: absolute;">{{ field.errors.0 }}</span>
                       </div>
                   </div>
                   {% endfor %}
                   
                   <div class="col-xs-6">
                       <button id="btnAdd" type="button" class="btn btn-primary">添加新数据</button>
                   </div>
               </div>
           </form>
       </div>
   </div>

JS代码：

image.png

如果你引用了layout模版，需要在模版中留出js部分的代码空间，

image.png

试图函数中：

先导入相应的包：

image.png

列表函数中写好form来源：因为html中用了 {% for field in form %} ，所以这里要从models中拿到form，并传给前端。pagination是分页，没有可以不写。

image.png

使用ModelForm来处理表单更方便。

image.png

modelFrom可以这样写，从数据库中拿到所有数据，不做任何验证：

需要做数据校验的话，就写函数在这里面就可以了。

image.png

最后要重启一下app就可以了。

image.png