django_study-7

最新推荐文章于 2025-07-29 22:40:47 发布

zhangli709

最新推荐文章于 2025-07-29 22:40:47 发布

阅读量138

点赞数

CC 4.0 BY-SA版权

分类专栏： django 文章标签： ajax mysql rest

本文链接：https://blog.youkuaiyun.com/zhangli709/article/details/80198265

django 专栏收录该内容

6 篇文章

订阅专栏

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

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

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': '电话不能为空！'
    })