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


Posted in Python onAugust 21, 2019

我使用的是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中的闭包总结
Sep 18 Python
python数据结构之图的实现方法
Jul 08 Python
Python2.x与Python3.x的区别
Jan 14 Python
Python开发之快速搭建自动回复微信公众号功能
Apr 22 Python
python实现pdf转换成word/txt纯文本文件
Jun 07 Python
python实现自动发送报警监控邮件
Jun 21 Python
Flask框架URL管理操作示例【基于@app.route】
Jul 23 Python
python RabbitMQ 使用详细介绍(小结)
Nov 08 Python
python 使用pandas计算累积求和的方法
Feb 08 Python
Django分页功能的实现代码详解
Jul 29 Python
Django多个app urls配置代码实例
Nov 26 Python
python爬虫beautifulsoup库使用操作教程全解(python爬虫基础入门)
Feb 19 Python
python防止随意修改类属性的实现方法
Aug 21 #Python
python进阶之自定义可迭代的类
Aug 20 #Python
关于阿里云oss获取sts凭证 app直传 python的实例
Aug 20 #Python
django中使用POST方法获取POST数据
Aug 20 #Python
python实现猜拳小游戏
Apr 05 #Python
django 自定义filter 判断if var in list的例子
Aug 20 #Python
python并发编程多进程 模拟抢票实现过程
Aug 20 #Python
You might like
PHP4与PHP5的时间格式问题
2008/02/17 PHP
php中日期加减法运算实现代码
2011/12/08 PHP
探讨PHP使用eAccelerator的API开发详解
2013/06/09 PHP
PHP远程调试之XDEBUG
2015/12/29 PHP
PHP基于SMTP协议实现邮件发送实例代码
2017/04/27 PHP
PHP与以太坊交互详解
2018/08/24 PHP
PHP封装请求类实例分析【基于Yii框架】
2019/10/17 PHP
php使用pthreads v3多线程实现抓取新浪新闻信息操作示例
2020/02/21 PHP
js中eval()函数和trim()去掉字符串左右空格应用
2013/02/02 Javascript
解析jquery获取父窗口的元素
2013/06/26 Javascript
js单独获取一个checkbox看其是否被选中
2014/09/22 Javascript
原创jQuery弹出层插件分享
2015/04/02 Javascript
探讨:JavaScript ECAMScript5 新特性之get/set访问器
2016/05/05 Javascript
用Node提供静态文件服务的方法
2018/07/06 Javascript
解决element-ui中下拉菜单子选项click事件不触发的问题
2018/08/22 Javascript
vue组件开发之用户无限添加自定义填写表单的方法
2018/08/28 Javascript
js实现图片无缝循环轮播
2019/10/28 Javascript
ES6学习笔记之字符串、数组、对象、函数新增知识点实例分析
2020/01/22 Javascript
vue自定义标签和单页面多路由的实现代码
2020/05/03 Javascript
[01:38]DOTA2辉夜杯 欢乐的观众现场采访
2015/12/26 DOTA
[03:41]2018完美盛典-《Fight With Us》
2018/12/16 DOTA
[37:29]完美世界DOTA2联赛PWL S2 LBZS vs Forest 第二场 11.19
2020/11/19 DOTA
python3读取MySQL-Front的MYSQL密码
2017/05/03 Python
Python 抓取微信公众号账号信息的方法
2019/06/14 Python
Python学习笔记之Break和Continue用法分析
2019/08/14 Python
python3.8下载及安装步骤详解
2020/01/15 Python
如何在django中添加日志功能
2020/02/06 Python
PyCharm Anaconda配置PyQt5开发环境及创建项目的教程详解
2020/03/24 Python
区分python中的进程与线程
2020/08/13 Python
Python实例教程之检索输出月份日历表
2020/12/16 Python
外语学院毕业生的自我鉴定
2013/11/28 职场文书
幼儿园小班植树节活动方案
2014/03/04 职场文书
领导干部“四风”问题批评与自我批评材料
2014/09/24 职场文书
岗位职责范本大全
2015/02/26 职场文书
2015年人事专员工作总结
2015/04/29 职场文书
python 实现mysql自动增删分区的方法
2021/04/01 Python