django和vue数据交互

最新推荐文章于 2025-07-14 15:24:18 发布

Qc1998

最新推荐文章于 2025-07-14 15:24:18 发布

阅读量5.7k

点赞数

CC 4.0 BY-SA版权

分类专栏： vue django 文章标签： django vue

本文链接：https://blog.youkuaiyun.com/Qc1998/article/details/79943716

vue 同时被 2 个专栏收录

5 篇文章

订阅专栏

django

5 篇文章

订阅专栏

本文探讨如何在Django后端与Vue前端之间实现数据交互。通过介绍使用API创建RESTful接口，以及Vue.js的Axios库进行HTTP请求，详细阐述了数据的发送与接收过程，帮助开发者理解这两个技术在实际项目中的整合应用。

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

我使用的是jQuery的ajax与django进行数据交互，遇到的问题是django的csrf

传输数据的方法如下：

    $(function() {
        $.ajax({
          url: 'account/register',
          type: 'post',
          dataType:'json',
          data: $('#form1').serialize(),
          success: function (result) {
            console.log(result);
            if (result) {
              alert("result");
            }
          },
          error: function () {
            alert("error");
          },
        })
      })
    })

django对应的代码

def register(request):
    if request.method=="POST":
        if request.POST.get('name'):
            return render(request,'success.html')
        else:
            return HttpResponse("账号不能为空“)

当提交表单的时候，会出现

如果前端可以有django渲染，这个问题很好解决，只需要在要提交的表单中加入{% csrf_token %},但是在这中情况下显然是行不通的，通过在网上的搜索，我找到了这样的解决方案，完整代码如下：

    $(function() {
      $('#sub').click(function () {
        $.ajaxSetup({
          beforeSend: function(xhr, settings) {
            function getCookie(name) {
              var cookieValue = null;
              if (document.cookie && document.cookie != '') {
                var cookies = document.cookie.split(';');
                for (var i = 0; i < cookies.length; i++) {
                  var cookie = jQuery.trim(cookies[i]);
                  // Does this cookie string begin with the name we want?
                  if (cookie.substring(0, name.length + 1) == (name + '=')) {
                    cookieValue = decodeURIComponent(cookie.substring(name.length + 1));
                    break;
                  }
                }
              }
              return cookieValue;
            }
            if (!(/^http:.*/.test(settings.url) || /^https:.*/.test(settings.url))) {
              // Only send the token to relative URLs i.e. locally.
              xhr.setRequestHeader("X-CSRFToken", getCookie('csrftoken'));
            }
          }
        });
        $.ajax({
          url: 'account/register',
          type: 'post',
          dataType:'json',
          data: $('#form1').serialize(),
          success: function (result) {
            console.log(result);
            if (result) {
              alert("result");
            }
          },
          error: function () {
            alert("success");
          },
        })
      })
    })

这样就可以成功提交表单了

方法来源 https://stackoverflow.com/questions/5100539/django-csrf-check-failing-with-an-ajax-post-request