django_study-7

本文介绍如何使用AJAX实现RESTful API的增删改查功能,并详细解释了CSRF保护机制的配置及应用。通过具体实例展示了前端与后端交互过程中的数据处理方式。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

ajax基本框架

$.ajax({
      url:'',
      type: '',
      data: '',
      dataType: 'json',
      success:function(){
          alert('删除成功');
      },
      error: function(){
          alert('删除失败')
      },
  });

csrf协议

form表单

  1. csrfmiddle开启,settings里的配置
  2. {% csrf_token %}解析对应,不然会报403的错误

ajax提交信息

  1. csrfmiddle开启,settings里的配置
  2. 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修改返回结构。

  1. 改之前全是数据 –> 改完后不仅返回数据data,还返回code和msg
  2. 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': '电话不能为空!'
    })
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值