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

_ajax.js

/**
* 发起请求
* @param url 请求地址
* @param data 请求数据 { } json格式
* @param type 请求类型 get|post
* @param success 请求成功回调方法(如果支持es6,使用 Promise 更方便)
* @param fail 请求失败回调方法
*/
function jqAjax(url, data, type, success, fail) {
_ajaxSetup(); // 先将 csrftoken 写入请求头,避免被django拒绝
$.ajax({
"url": url,
"type": type,
"data": data,
"timeout": 5000,
"beforeSend": function (xhr) { },
"success": function (res) {
if (res.code === 200) {
if (success) {
console.log(res);
success(res.data)
}
} else {
if (fail) {
fail(res)
}
console.log(res.code + ":" + res.message)
}
},
"error": function (e) {
console.log(e)
if (fail) {
fail(e)
}
}
});
} /**
* 快捷发起get请求
* @param url 地址(因为是django项目的静态文件,地址不需要加ip与端口)
* @param data 数据 { } json
* @param success 请求成功方法
* @param fail 请求失败的方法
* @private
*/
function _get(url, data, success) {
jqAjax(url, data, "get", success)
} /**
* 快捷发起post请求
* @param url 地址(因为是django项目的静态文件,地址不需要加ip与端口)
* @param data 数据 { } json
* @param success 请求成功方法
* @param fail 请求失败的方法
* @private
*/
function _post(url, data, success) {
jqAjax(url, data, "post", success)
} // 下面两个方法主要处理django中的csrftoken验证问题
// 将csrftoken写入当前请求头
function _ajaxSetup() {
$.ajaxSetup({
beforeSend: function (xhr, settings) {
// console.log(getCookie('csrftoken'));
if (!/^(GET|HEAD|OPTIONS|TRACE)$/.test(settings.type) && !this.crossDomain) {
xhr.setRequestHeader("X-CSRFToken", getCookie('csrftoken'));
}
}
});
} 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;
}

  

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

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. Codeforces 450C:Jzzhu and Chocolate(贪心)

    C. Jzzhu and Chocolate time limit per test: 1 seconds memory limit per test: 256 megabytes input: st ...

  2. [C]郝斌C语言课程大纲及笔记

    本笔记整理于郝斌老师C语言课程,做学习参考之用. 1.[编程笔记]第一章 C语言概述 2.[编程笔记]第二章 C语言预备知识 3.[编程笔记]第三章 运算符与表达式 4.[编程笔记]第四章 流程控制 ...

  3. Java实习生常规技术面试题每日十题Java基础(三)

    目录 1.是否可以从一个static方法内部发出对非static方法的调用? 2.Integer与int的区别? 3.Overload和Override的区别.参数列表相同,返回值不同的方法,是否是重 ...

  4. Java初学者作业——学生成绩等级流程图练习

    返回本章节 返回作业目录 在Word 中编写算法实现学生成绩等级的输出,并绘制对应算法的流程图. 功能要求:输入学生成绩,输出对应成绩等级,输出规则如下: 学生成绩区间 对应成绩等级 [90,100] ...

  5. Docker | dockerfile 文件编写

    dockerfile 的作用 dockerfile 作用就是制作镜像,保持开发,测试,生产环境的一致性. 直接将容器制作为镜像 制作新的镜像 # 把容器按照自己的需求个性完之后,就可以创建自己的镜像的 ...

  6. STC8H开发(二): 在Linux VSCode中配置和使用FwLib_STC8封装库(图文详解)

    目录 STC8H开发(一): 在Keil5中配置和使用FwLib_STC8封装库(图文详解) STC8H开发(二): 在Linux VSCode中配置和使用FwLib_STC8封装库(图文详解) 前面 ...

  7. CentOS 7安装Etherpad(在线协作编辑)

    Etherpad 是一个线上共制平台,是基于网络的实时合作文档编辑器,三.四个人可以坐在自己电脑前,同时对一份文档修改,也同时能看到其他人的修改. CentOS 7 安装 Etherpad 1.先安装 ...

  8. nuxt2.0项目创建(最新)

     使用import需要babel编译写法如下 //修改1打开package.json文件 "dev": "cross-env NODE_ENV=development n ...

  9. 实验 7 : OpenDaylight 实验 —— Python 中的 REST API 调用

    实验 7 : OpenDaylight 实验 -- Python 中的 REST API 调用 一.实验 目的 对 Python 调用 OpenDaylight 的 REST API 方法有初步了解. ...

  10. Servlet初级学习加入数据库操作(一)

    需要的源代码地址: https://url56.ctfile.com/f/34653256-527822631-2e255a(访问密码:7567) 将页面中的数据逐步替换为数据库管理 准备一个连接数据 ...