Django之ajax(jquery)封装(包含 将 csrftoken 写入请求头方法)
由于支持问题,未使用 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 写入请求头方法)的更多相关文章
- 基于jquery封装通用的控制显示隐藏的方法
应用场景 在项目中会存在大量这样的需求: 1.选择不同的radio单选框,页面上的部分内容随之显示隐藏 2.选择不同的option下拉框内容,页面上的部分内容随之显示隐藏 如果每次遇到这类需求都单独写 ...
- js实现原生Ajax的封装及ajax原理详解
原理及概念 AJAX即“Asynchronous Javascript And XML”(异步JavaScript和XML),是一种用于创建快速动态网页的技术. 动态网页:是指可以通过服务器语言结合数 ...
- 采用jquery同django实现ajax通信
在网页访问中通过HTTP协议中的get/post文件发送数据或请求.在浏览器中输入url后,浏览器就会帮助我们完成请求的发送和返回,并刷新更新界面.但是,如果我们不想更新界面,仅仅是发送一个get/p ...
- Ajax的封装,以及利用jquery的ajax获取天气预报
1.Ajax的封装 function ajax(type,url,param,sync,datetype,callback){//第一个参数是获取数据的类型,第二个参数是传入open的url,第三个是 ...
- 原生态AJAX详解和jquery对AJAX的封装
AJAX: A :Asynchronous [eI`sinkrenes] 异步 J :JavaScript JavaScript脚本语言 A: And X :XML 可扩展标记语言 AJAX现在 ...
- 不借助jquery封装好的ajax,你能用js手写ajax框架吗
不借助jquery封装好的ajax,你能手写ajax框架吗?最基础的ajax框架,一起来围观吧. .创建XMLHttpRequest对象 var xhr = new XMLHttpRequest(); ...
- 模仿jQuery的ajax的封装
/* * 我们使用了ajax 的xmlHttpRequest 跟服务器进行交互. * * 交互了有四个基本步骤 * 1:创建对象 * 2:建立连接 * 3:发送请求 * 4:接收数据 * * 这些操作 ...
- Jquery封装ajax
Jquery封装ajax Load方法 <!-- 将jquery.js导入进来 --> <script type="text/javascript&qu ...
- Jquery Ajax简单封装(集中错误、请求loading处理)
Jquery Ajax简单封装(集中错误.请求loading处理) 对Jquery Ajax做了简单封装,错误处理,请求loading等,运用到项目中集中处理会很方便. 技术层面没有什么好说的,请求是 ...
随机推荐
- 【LeetCode】753. Cracking the Safe 解题报告(Python)
作者: 负雪明烛 id: fuxuemingzhu 个人博客: http://fuxuemingzhu.cn/ 题目地址: https://leetcode.com/problems/cracking ...
- 【LeetCode】475. Heaters 解题报告(Python & C++)
作者: 负雪明烛 id: fuxuemingzhu 个人博客: http://fuxuemingzhu.cn/ 目录 题目描述 题目大意 解题方法 遍历 日期 题目地址:https://leetcod ...
- 【LeetCode】806. Number of Lines To Write String 解题报告(Python)
作者: 负雪明烛 id: fuxuemingzhu 个人博客: http://fuxuemingzhu.cn/ 目录 题目描述 题目大意 解题方法 使用ASIIC码求长度 使用字典保存长度 日期 题目 ...
- iOS提交AppStore审核时:提示有其他支付并隐藏功能被拒的处理办法
背景提示:数字类产品(比如购买会员等不需要配送实物的商品),Apple规定必须使用苹果IAP应用内支付,给Apple分成30%.打包的时候不要勾选微信或支付宝等其他支付方式.如果你提交的包里包含了微信 ...
- 登陆认证框架:SpringSecurity
最近想给自己的小系统搭建一个登录认证服务,最初是想着一套oauth2权鉴就可以,但是发现这个oauth2只是权鉴,具体的登录认证需要由 SpringSecurity来进行实现. 也就是说SpringS ...
- JDK、JVM和JRE三者间的关系,及JDK安装路径下的文件夹说明
JDK的全称是Java SE Development Kit, 即Java标准开发包,是Sun公司提供的一套用于开发Java应用程序的开发包, 它提供了编译.运行Java查询所需的各种工具和资源,包括 ...
- Pytest_fixture(9)
什么是fixture fixture是pytest特有的功能,使用装饰器 @pytest.fixture 标记的函数在其他函数中能被当作参数传入并被调用. fixture有明确的名字,在其他函数,模块 ...
- Python_多任务:进程、线程、协程
进程 进程是一个具有一定独立功能的程序在一个数据集上的一次动态执行的过程,是操作系统进行资源分配和调度的一个独立单位,是应用程序运行的载体.进程是一种抽象的概念,从来没有统一的标准定义.进程一般由程序 ...
- SQL Server数据库出现“无法访问数据库XXX(objectExplorer)”的解决办法
数据库版本为2008R2,服务器异常重启并重新挂载iscsi后,数据库出现"无法访问数据库XXX(objectExplorer)"问题. 输入SQL命令查看数据库状态 1 sele ...
- Go语言发邮件
发送邮件是实际业务中经常会用到的一个功能,而在Go语言中实现发送邮件的库也有很多,这篇文章将介绍go语言中如何发邮件. 1. 登录QQ邮箱,选择账户,开启POP3/SMTP服务和IMAP/SMTP服务 ...