Django进行前后端操作流程和问题

Django进行前后端操作流程和问题

在前端，如果添加的数据篇幅不长，数据项目不多，例如简单的一些信息录入，那么可以使用ajax请求来完成，对于添加数据和删除数据，可以在不刷新当前页面的前提下进行操作。
一般流程为：

1. 首先找到bootstrap的模态框进行引用，操作都在模态框中进行
2. 设置模态框的参数，例如form表单中的一些names和values
3. 寻找标签，获取用户输入数据，通过ajax向后端发送，并且在前端执行相同的操作（在不刷新页面的情况下）
4. 后端数据库进行操作，返回前端数据

模态框的打开与关闭：$('模态框id').modal（'show/hide')
（特别注意，如果你的模态框添加的地方，存在设置 data-target="#myModal"或href="#myModal"或者写javascript 函数响应点击事件打开模态框，不能同时使用，否则出现闪退）

在获取用户输入的数据时，有2种方法：

1. 设置字典：postData={}，用.each（）方法循环遍历每个<input>或者<select>标签，设置键值对加入字典种postData[key]=value，之后在ajax种直接发送。
2. 第二种方法是使用<form>的内置方法.seralize()方法，直接获取每个<input>标签内的数据，但是.seralize()获取的值在获取中文时会出现编码错误，所以要对对象进行编码decodeURIComponent(XXX,true)其中’XXX’就是你的.seralize()对象。

在添加时也会有一种错误出现，那就是反复提交数据，基本问题的产生是因为：关闭模态框的时候，

1. 没有将数据清除
2. 没有点击关闭按钮直接取消模态框
3. 打开模态框的事件和保存发送给后端的事件写在同一个函数里

一般解决办法就是将唤出模态框的事件和发送给后端的ajax操作分成2个函数来写，而且每次推出模态框时，要将数据清除。（这里的分开来写，具体是：只有当点击了发送给后端的按钮时，才获取数据）
清除模态框中的数据的办法：

1. 在js中，直接找到form标签然后执行reset()方法，就可以清除form表单中的数据
2. 在jquery中与js不同，要间接操作$('#myform')[0].reset();

那么在获取了数据之后并且向后台发送了数据，如何更新前端数据呢？最简单粗暴的办法就是刷新页面windows.location.reload()但是这样的用户体验并不好，所以可以在页面上临时添加刚才的数据，记录刚才的数据，通过字符串拼接的方式，将参数传到html中,模拟已经刷新。（如果你的数据前需要加上id，那么获取刚刚添加的数据的数据库id的方法：

obj=Table.objects.create(name=name…)
id=obj.id

这样就可以获得新的id然后直接传送给前端，传给html）

删除则显得简单得多，我们在添加数据时，应该在头标签处将获得的id放在里面当作自定义属性，这样的好处是，将来我们在获取标签时，可以通过id来直接获取，获取标签之后直接进行.remove()方法先将前端的标签删除做到模拟刷新数据库删除的操作，再通过ajax进行发送数据请求，在后端操作数据库删除。