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

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

image.png

页面展示的代码：

html端：主要是要写

，这个id用来后面给js绑定点击事件。

       
表单
       

           
               

                   {% for field in form %}
                   

                       

                           {{ field.label }}
                           {{ field }}
                           {{ field.errors.0 }}
                       
                   
                   {% endfor %}
                   
                   

                       添加新数据
                   
               
           
       
   

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