django和vue实现数据交互的方法

 更新时间:2019年08月21日 08:59:50   作者:Qc1998  
今天小编就为大家分享一篇django和vue实现数据交互的方法,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧

我使用的是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

以上这篇django和vue实现数据交互的方法就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持脚本之家。

相关文章

  • 浅谈Python黑帽子取代netcat

    浅谈Python黑帽子取代netcat

    本篇文章通过一个小小实例给大家分析了Python黑帽子取代netcat的过程以及相关知识点,对此有兴趣的朋友可以学习下。
    2018-02-02
  • Keras设置以及获取权重的实现

    Keras设置以及获取权重的实现

    这篇文章主要介绍了Keras设置以及获取权重的实现,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2020-06-06
  • Python运算符重载用法实例分析

    Python运算符重载用法实例分析

    这篇文章主要介绍了Python运算符重载用法,实例分析了几种常见的Python运算符重载的使用技巧,需要的朋友可以参考下
    2015-06-06
  • python必备库Matplotlib画图神器

    python必备库Matplotlib画图神器

    这篇文章主要介绍了python必备库Matplotlib画图神器,Matplotlib 是 Python 中最受欢迎的数据可视化软件包之一,支持跨平台运行,它是 Python 常用的 2D 绘图库,同时它也提供了一部分 3D 绘图接口,更多详细内容,需要的小伙伴可以参考一下下面文章具体内容
    2022-03-03
  • pycharm安装包失败的解决方法

    pycharm安装包失败的解决方法

    PyCharm是一款由JetBrains开发的Python集成开发环境(IDE),它集成了代码编辑器、调试器、版本控制工具和测试工具等功能,下面这篇文章主要给大家介绍了关于pycharm安装包失败的解决方法,需要的朋友可以参考下
    2023-05-05
  • python TKinter获取文本框内容的方法

    python TKinter获取文本框内容的方法

    今天小编就为大家分享一篇python TKinter获取文本框内容的方法,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2018-10-10
  • Python实现钉钉发送报警消息的方法

    Python实现钉钉发送报警消息的方法

    今天小编就为大家分享一篇Python实现钉钉发送报警消息的方法,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2019-02-02
  • python异常处理并调试

    python异常处理并调试

    这篇文章主要介绍了python异常处理并调试,异常是错误出现时,可以在正常的控制流程之外采取的行为下面我们就来看看python的那些异常,需要的小伙伴可以参考一下
    2022-02-02
  • python 从远程服务器下载日志文件的程序

    python 从远程服务器下载日志文件的程序

    本文提供了一种方法,该程序可实现抓取服务器的日志文件到本地,根据该程序可自行扩展对日志文件的自动化分析。常用于数据挖掘、生产维护等
    2013-02-02
  • Python数据库反向生成Model最优方案示例

    Python数据库反向生成Model最优方案示例

    这篇文章主要介绍了Python数据库反向生成Model最优方案的示例详解,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
    2022-07-07

最新评论