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数据可视化之日期折线图画法

    python数据可视化之日期折线图画法

    这篇文章主要为大家详细介绍了python数据可视化之日期折线图画法,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2022-04-04
  • python中的字符串占位符的"{0:2}"

    python中的字符串占位符的"{0:2}"

    这篇文章主要介绍了python中的字符串占位符的"{0:2}",具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2022-05-05
  • python遗传算法之geatpy的深入理解

    python遗传算法之geatpy的深入理解

    本文主要介绍了python遗传算法之geatpy的深入理解,主要从geatpy中的各种数据结构一步一步进行学习,具有一定的参考价值,感兴趣的可以了解一下
    2022-04-04
  • Python批量改变图片名字的示例代码

    Python批量改变图片名字的示例代码

    本文主要介绍了Python批量改变图片名字的示例代码,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2022-05-05
  • NDArray 与 numpy.ndarray 互相转换方式

    NDArray 与 numpy.ndarray 互相转换方式

    这篇文章主要介绍了NDArray 与 numpy.ndarray 互相转换方式,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2022-05-05
  • Python网络编程中urllib2模块的用法总结

    Python网络编程中urllib2模块的用法总结

    使用urllib2模块进行基于url的HTTP请求等操作大家也许都比较熟悉,这里我们再深入来了解一下urllib2针对HTTP的异常处理相关功能,一起来看一下Python网络编程中urllib2模块的用法总结:
    2016-07-07
  • 通过Python绘制九种二次曲面的示例详解

    通过Python绘制九种二次曲面的示例详解

    这篇文章主要为大家详细介绍了如何通过Python绘制九种二次曲面,文中的示例代码讲解详细,具有一定的学习价值,感兴趣的小伙伴可以跟随小编一起了解一下
    2023-06-06
  • python鼠标绘图附代码

    python鼠标绘图附代码

    这篇文章主要为大家介绍了python鼠标绘图的实现完整示例,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
    2022-05-05
  • Python 深入理解yield

    Python 深入理解yield

    yield的英文单词意思是生产,刚接触Python的时候感到非常困惑,一直没弄明白yield的用法。
    2008-09-09
  • 解决hive中导入text文件遇到的坑

    解决hive中导入text文件遇到的坑

    这篇文章主要介绍了解决hive中导入text文件遇到的坑,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2021-04-04

最新评论