ajax基本框架
$.ajax({
url:'',
type: '',
data: '',
dataType: 'json',
success:function(){
alert('删除成功');
},
error: function(){
alert('删除失败')
},
});
csrf协议
form表单
- csrfmiddle开启,settings里的配置
- {% csrf_token %}解析对应,不然会报403的错误
ajax提交信息
- csrfmiddle开启,settings里的配置
- csrf=$(‘input[name=”csrfmiddlewaretoken”]’).val
- headers:{‘X-CSRFToken’:csrf}
- {% csrf_token %}
ajax配合rest的框架,实现增删改。
{% csrf_token %}
<div>
<input type="button" id="showStus" value="获取所有学生的信息">
</div>
<div>
姓名:<input type="text" class="s_name" name="name">
电话:<input type="text" class="s_tel" name="tel">
<input type="button" value="新建" onclick="post()">
</div>
<div id="div_stus"></div>
<div id="div_update_stus"></div>
<script type="text/javascript" src="/static/js/jquery.min.js"></script>
<script type="text/javascript">
$(function(){
$('#showStus').click(function () {
$.get('/stu/student',function (msg) {
console.log(msg)
s = '<table><tr><td>ID</td><td>姓名</td><td>地址</td><td>操作</td></tr>'
for(var i=0;i<msg['data'].length;i++){
s += '<tr><td>' + msg['data'][i].id + '</td>\
<td>' + msg['data'][i].s_name + '</td>\
<td>' + msg['data'][i].s_tel + '</td><td>\
<a href="javascript:;" onclick="update_stu(' + msg['data'][i].id +')">编辑</a>|\
<a href="javascript:;" onclick="del_stu('+ msg['data'][i].id + ')">删除</a></td></tr>'
}
s += '</table>'
$('#div_stus').html(s)
});
});
});
function del_stu(i){
csrf = $('input[name="csrfmiddlewaretoken"]').val()
$.ajax({
url:'/stu/student/'+ i +'/',
type: 'delete',
headers:{'X-CSRFToken': csrf},
dataType: 'json',
success:function(){
alert('删除成功');
},
error: function(){
alert('删除失败')
},
});
};
function update_stu(i){
s = '姓名:<input type="text" id="s_name" name="name">' +
'电话:<input type="text" id="s_tel" name="tel">' +
'<input type="button" value="提交" onclick="update(' + i + ')">'
$('#div_update_stus').html(s);
}
function update(i){
csrf = $('input[name="csrfmiddlewaretoken"]').val()
s_name = $('#s_name').val()
s_tel = $('#s_tel').val()
$.ajax({
url:'/stu/student/'+ i +'/',
type: 'PATCH',
data: {'s_name':s_name, 's_tel': s_tel},
headers:{'X-CSRFToken': csrf},
dataType: 'json',
success:function(){
alert('更新成功');
},
error: function(){
alert('更新失败')
},
});
}
function post(){
csrf = $('input[name="csrfmiddlewaretoken"]').val()
s_name = $('.s_name').val()
s_tel = $('.s_tel').val()
$.ajax({
url:'/stu/student/',
type: 'POST',
data: {'s_name':s_name, 's_tel': s_tel},
headers:{'X-CSRFToken': csrf},
dataType: 'json',
success:function(){
alert('新建成功');
},
error: function(){
alert('新建失败')
},
});
}
</script>
rest修改返回结构。
- 改之前全是数据 –> 改完后不仅返回数据data,还返回code和msg
- settings
- 配置restful api返回结果
REST_FRAMEWORK = {
'DEFAULT_RENDERER_CLASSES':(
'utils.RenderResponse.CustomJsonRenderer',
)
}
3.在中间键里,utils里新建一个文件RenderResponse,并在文件里写入逻辑处理的类CustomJsonRenderer,将接收到的数据,保存在data里,并且新增一个code和msg,作为信息返回是否成功
from rest_framework.renderers import JSONRenderer
class CustomJsonRenderer(JSONRenderer):
def render(self, data, accepted_media_type=None, renderer_context=None):
"""
格式 code xxx msg 请求成功,改造data类型
:param data: 返回数据
:param accepted_media_type:
:param renderer_context:
:return: {}
"""
if renderer_context:
if isinstance(data, dict):
# pop 有值就拿出来,没有就静默处理
msg = data.pop('msg', '请求成功')
code = data.pop('code', 0)
else:
msg = '请求成功'
code = 0
response = renderer_context['response']
response.status_code = 200
res = {
'code': code,
'msg': msg,
'data':data,
}
return super().render(res,accepted_media_type,renderer_context)
else:
return super().render(data, accepted_media_type, renderer_context)
更改数据库的数据时,报错的话,让返回的英文信息,变为自己定义的中文信息。
在serializers.py文件里,这里是绑定数据库的地方,我们写出报错返回的信息。
s_name = serializers.CharField(error_messages={
'blank': '用户名不能为空!',
'max_length': '用户名不能超过十个字符串'
},max_length=10)
s_tel = serializers.CharField(error_messages={
'blank': '电话不能为空!'
})