Django进行前后端操作流程和问题
在前端,如果添加的数据篇幅不长,数据项目不多,例如简单的一些信息录入,那么可以使用ajax请求来完成,对于添加数据和删除数据,可以在不刷新当前页面的前提下进行操作。
一般流程为:
- 首先找到bootstrap的模态框进行引用,操作都在模态框中进行
- 设置模态框的参数,例如form表单中的一些names和values
- 寻找标签,获取用户输入数据,通过ajax向后端发送,并且在前端执行相同的操作(在不刷新页面的情况下)
- 后端数据库进行操作,返回前端数据
模态框的打开与关闭:$('模态框id').modal('show/hide')
(特别注意,如果你的模态框添加的地方,存在设置 data-target="#myModal"
或href="#myModal"
或者写javascript 函数响应点击事件打开模态框,不能同时使用,否则出现闪退)
在获取用户输入的数据时,有2种方法:
- 设置字典:
postData={}
,用.each()
方法循环遍历每个<input>
或者<select>
标签,设置键值对加入字典种postData[key]=value
,之后在ajax种直接发送。 - 第二种方法是使用
<form>
的内置方法.seralize()
方法,直接获取每个<input>
标签内的数据,但是.seralize()
获取的值在获取中文时会出现编码错误,所以要对对象进行编码decodeURIComponent(XXX,true)
其中’XXX’就是你的.seralize()
对象。
在添加时也会有一种错误出现,那就是反复提交数据,基本问题的产生是因为:关闭模态框的时候,
- 没有将数据清除
- 没有点击关闭按钮直接取消模态框
- 打开模态框的事件和保存发送给后端的事件写在同一个函数里
一般解决办法就是将唤出模态框的事件和发送给后端的ajax操作分成2个函数来写,而且每次推出模态框时,要将数据清除。(这里的分开来写,具体是:只有当点击了发送给后端的按钮时,才获取数据)
清除模态框中的数据的办法:
- 在js中,直接找到form标签然后执行reset()方法,就可以清除form表单中的数据
- 在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进行发送数据请求,在后端操作数据库删除。