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实现数据交互的方法就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持我们。

赞 (0)

相关推荐

  • 使用django和vue进行数据交互的方法步骤

    一.前端请求的封装 1.将请求地址封装起来,以便日后修改,在src/assets/js目录下创建getPath.js文件 export default function getUrl(str) { let url = 'http://localhost:8000/' + str; return url; } 2.在同一个目录下创建axios.js文件 我的前端数据交互使用的模块使用的是axios import axios from 'axios' import getUrl from './ge

  • 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&qu

  • 使用Vue-axios进行数据交互的方法

    目录 1.安装axios 2.axios的使用 3.讲一下代理proxyTable的使用 1.安装axios 打开cmd命令行工具 cd到项目目录 输入以下命令 npm install axios 提示安装完成以后,打开main.js 输入以下代码: import axios from 'axios' 接着在底下输入: Vue.prototype.$axios = axios 配置就完事了 2.axios的使用 this.$axios({         method: 'post',//交互方

  • AngularJS实现自定义指令与控制器数据交互的方法示例

    本文实例讲述了AngularJS实现自定义指令与控制器数据交互的方法.分享给大家供大家参考,具体如下: <!doctype html> <html> <head> <meta charset="utf-8"> <title>AngularJS自定义指令与控制器数据交互</title> <!-- <script src="http://cdn.bootcss.com/angular.js/1.3

  • 在SSM框架下用laypage和ajax实现分页和数据交互的方法

    layui,一款前端框架,提供了丰富的组件和模板,layui提供的简约后台管理模板,对于后端学习者来说是个不错的福音.这里记录在SSM框架下使用layui的分页组件laypage.(官网开发文档) 环境 Spring+SpringMVC+Mybatis , jquery-3.1.0.min.js , mysql-connector-java-5.1.34 参考文档 layui-laypage参数文档 前端代码主要参考的是layui官网给定的代码,加载layui.css和layui.js:除此之外

  • TP5(thinkPHP5)框架使用ajax实现与后台数据交互的方法小结

    本文实例讲述了TP5(thinkPHP5)框架使用ajax实现与后台数据交互的方法.分享给大家供大家参考,具体如下: 方法一: serialize() 方法通过序列化表单值,创建 URL 编码文本字符串,这个是jquery提供的方法 前端代码 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>ajax交互</title> <script s

  • Django与图表的数据交互的实现

    Django与图表的数据交互的实现

    目录 环境相关 实现思路(需要理解的请结合代码来看) 代码: 成果展示 参考博客 在Django开发过程中,遇到了需要图表进行数据可视化的需要.因此查询了相关文档,并记录下如何实现与图表的数据交互. 本人是个前端小白,只会改不会写(套模板).仅供参考!!! 环境相关 Django (版本不限,当然不同的版本有不同的后端代码写法.本文环境为Django 3.1)echarts (前端的画图框架,导入JS包即可) 点击网址可以找到模板 网址JQuery (用于Ajax请求 导入JS包即可 在文中会有

  • vue之数据交互实例代码

    vue中的交互(ajax,jsonp) vue中也存在像ajax和jsonp的数据交互,实现向服务器获取数据,但是他本身框架当中没有这样的方法,需要一个新的小东西叫vue-resouce.js 地址:https://github.com/pagekit/vue-resource/blob/master/README.md <meta charset="UTF-8"> <title>Document</title> <script type=&q

  • 详解vue前后台数据交互vue-resource文档

    详解vue前后台数据交互vue-resource文档

    这两天学习了vue-resource插件个地方知识点挺多的,而且很重要,所以,今天添加一点小笔记. Vue可以构建一个完全不依赖后端服务的应用,同时也可以与服务端进行数据交互来同步界面的动态更新. Vue通过插件的形式实现了基于AJAX,JSPNP等技术的服务端通信. vue-resource是一个通过XMLHttpRequrest或JSONP技术实现异步加载服务端数据的Vue插件 提供了一般的 HTTP请求接口和RESTful架构请求接口,并且提供了全局方法和VUe组件实例方法. 使用的版本是

  • 详解springmvc之json数据交互controller方法返回值为简单类型

    当controller方法的返回值为简单类型比如String时,该如何与json交互呢? 使用@RequestBody 比如代码如下: @RequestMapping(value="/ceshijson",produces="application/json;charset=UTF-8") @ResponseBody public String ceshijson(@RequestBody String channelId) throws IOException{

随机推荐