由于支持问题,未使用 es6 语法

_ajax.js

  1. /**
  2. * 发起请求
  3. * @param url 请求地址
  4. * @param data 请求数据 { } json格式
  5. * @param type 请求类型 get|post
  6. * @param success 请求成功回调方法(如果支持es6,使用 Promise 更方便)
  7. * @param fail 请求失败回调方法
  8. */
  9. function jqAjax(url, data, type, success, fail) {
  10. _ajaxSetup(); // 先将 csrftoken 写入请求头,避免被django拒绝
  11. $.ajax({
  12. "url": url,
  13. "type": type,
  14. "data": data,
  15. "timeout": 5000,
  16. "beforeSend": function (xhr) {
  17.  
  18. },
  19. "success": function (res) {
  20. if (res.code === 200) {
  21. if (success) {
  22. console.log(res);
  23. success(res.data)
  24. }
  25. } else {
  26. if (fail) {
  27. fail(res)
  28. }
  29. console.log(res.code + ":" + res.message)
  30. }
  31. },
  32. "error": function (e) {
  33. console.log(e)
  34. if (fail) {
  35. fail(e)
  36. }
  37. }
  38. });
  39. }
  40.  
  41. /**
  42. * 快捷发起get请求
  43. * @param url 地址(因为是django项目的静态文件,地址不需要加ip与端口)
  44. * @param data 数据 { } json
  45. * @param success 请求成功方法
  46. * @param fail 请求失败的方法
  47. * @private
  48. */
  49. function _get(url, data, success) {
  50. jqAjax(url, data, "get", success)
  51. }
  52.  
  53. /**
  54. * 快捷发起post请求
  55. * @param url 地址(因为是django项目的静态文件,地址不需要加ip与端口)
  56. * @param data 数据 { } json
  57. * @param success 请求成功方法
  58. * @param fail 请求失败的方法
  59. * @private
  60. */
  61. function _post(url, data, success) {
  62. jqAjax(url, data, "post", success)
  63. }
  64.  
  65. // 下面两个方法主要处理django中的csrftoken验证问题
  66. // 将csrftoken写入当前请求头
  67. function _ajaxSetup() {
  68. $.ajaxSetup({
  69. beforeSend: function (xhr, settings) {
  70. // console.log(getCookie('csrftoken'));
  71. if (!/^(GET|HEAD|OPTIONS|TRACE)$/.test(settings.type) && !this.crossDomain) {
  72. xhr.setRequestHeader("X-CSRFToken", getCookie('csrftoken'));
  73. }
  74. }
  75. });
  76. }
  77.  
  78. function getCookie(name) {
  79. var cookieValue = null;
  80. if (document.cookie && document.cookie !== '') {
  81. var cookies = document.cookie.split(';');
  82. for (var i = 0; i < cookies.length; i++) {
  83. var cookie = jQuery.trim(cookies[i]);
  84. // Does this cookie string begin with the name we want?
  85. if (cookie.substring(0, name.length + 1) === (name + '=')) {
  86. cookieValue = decodeURIComponent(cookie.substring(name.length + 1));
  87. break;
  88. }
  89. }
  90. }
  91. return cookieValue;
  92. }

  

如果你希望成功,当以恒心为良友,以经验为参谋,以当心为兄弟,以希望为哨兵。——爱迪生

Django之ajax(jquery)封装(包含 将 csrftoken 写入请求头方法)的更多相关文章

  1. 基于jquery封装通用的控制显示隐藏的方法

    应用场景 在项目中会存在大量这样的需求: 1.选择不同的radio单选框,页面上的部分内容随之显示隐藏 2.选择不同的option下拉框内容,页面上的部分内容随之显示隐藏 如果每次遇到这类需求都单独写 ...

  2. js实现原生Ajax的封装及ajax原理详解

    原理及概念 AJAX即“Asynchronous Javascript And XML”(异步JavaScript和XML),是一种用于创建快速动态网页的技术. 动态网页:是指可以通过服务器语言结合数 ...

  3. 采用jquery同django实现ajax通信

    在网页访问中通过HTTP协议中的get/post文件发送数据或请求.在浏览器中输入url后,浏览器就会帮助我们完成请求的发送和返回,并刷新更新界面.但是,如果我们不想更新界面,仅仅是发送一个get/p ...

  4. Ajax的封装,以及利用jquery的ajax获取天气预报

    1.Ajax的封装 function ajax(type,url,param,sync,datetype,callback){//第一个参数是获取数据的类型,第二个参数是传入open的url,第三个是 ...

  5. 原生态AJAX详解和jquery对AJAX的封装

    AJAX: A :Asynchronous [eI`sinkrenes] 异步 J :JavaScript    JavaScript脚本语言 A: And X :XML 可扩展标记语言 AJAX现在 ...

  6. 不借助jquery封装好的ajax,你能用js手写ajax框架吗

    不借助jquery封装好的ajax,你能手写ajax框架吗?最基础的ajax框架,一起来围观吧. .创建XMLHttpRequest对象 var xhr = new XMLHttpRequest(); ...

  7. 模仿jQuery的ajax的封装

    /* * 我们使用了ajax 的xmlHttpRequest 跟服务器进行交互. * * 交互了有四个基本步骤 * 1:创建对象 * 2:建立连接 * 3:发送请求 * 4:接收数据 * * 这些操作 ...

  8. Jquery封装ajax

    Jquery封装ajax   Load方法     <!-- 将jquery.js导入进来 -->     <script type="text/javascript&qu ...

  9. Jquery Ajax简单封装(集中错误、请求loading处理)

    Jquery Ajax简单封装(集中错误.请求loading处理) 对Jquery Ajax做了简单封装,错误处理,请求loading等,运用到项目中集中处理会很方便. 技术层面没有什么好说的,请求是 ...

随机推荐

  1. 【Java笔记】Java分包问题

    这个图讲的很清晰,转自-http://www.bubuko.com/infodetail-2219664.html

  2. css--深入理解z-index引发的层叠上下文、层叠等级和层叠顺序

    前言 在编写css样式代码的时候,我们经常会遇到z-index属性的使用,我们可能只了解z-index能够提高元素的层级,并不知道具体是怎么实现的.本文就来总结一个由z-index 引发的层叠上下文和 ...

  3. OverFeat:Integrated Recognition, Localization and Detection using Convolutional Networks

    目录 概 主要内容 Sermanet P., Eigen D., Zhang X., Mathieu M., Fergus R., LeCun Y. OverFeat:integrated recog ...

  4. 本地修改配置hosts文件解决Github加载慢问题

    本地修改配置hosts文件解决Github加载慢问题 手动方式 hosts 文件在每个系统的位置不一,详情如下: Windows 系统:C:\Windows\System32\drivers\etc\ ...

  5. SQLServer中的CTE(Common Table Expression)通用表表达式使用详解

    概述 我们经常会编写由基本的 SELECT/FROM/WHERE 类型的语句派生而来的复杂 SQL 语句.其中一种方案是需要编写在 FROM 子句内使用派生表(也称为内联视图)的 Transact-S ...

  6. JAX-MD在近邻表的计算中,使用了什么奇技淫巧?(一)

    技术背景 JAX-MD是一款基于JAX的纯Python高性能分子动力学模拟软件,应该说在纯Python的软件中很难超越其性能.当然,比一部分直接基于CUDA的分子动力学模拟软件性能还是有些差距.而在计 ...

  7. 使用.NET 6开发TodoList应用(17)——实现数据塑形

    系列导航及源代码 使用.NET 6开发TodoList应用文章索引 需求 在查询的场景中,还有一类需求不是很常见,就是在前端请求中指定返回的字段,所以关于搜索的最后一个主题我们就来演示一下关于数据塑形 ...

  8. 图解四种 IO 模型

    最近越来越认为,在讲解技术相关问题时,大白话固然很重要,通俗易懂,让人有想读下去的欲望.但几乎所有的事,都有两面性,在看到其带来好处时,不妨想想是否也引入了不好的地方. 例如在博客中,过于大白话的语言 ...

  9. 【Spring专场】「IOC容器」不看源码就带你认识核心流程以及运作原理

    这是史上最全面的Spring的核心流程以及运作原理的分析指南 [Spring核心专题]「IOC容器篇」不看繁琐的源码就带你浏览Spring的核心流程以及运作原理 [Spring核心专题]「AOP容器篇 ...

  10. 初识python: 自定义函数

    什么是函数? 函数是组织好的,可重复使用的,用来实现单一,或相关联功能的代码段.函数能提高应用的模块性,和代码的重复利用率. 函数的定义方法: def test(x): '函数定义方法' x+=1 r ...