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等,运用到项目中集中处理会很方便. 技术层面没有什么好说的,请求是 ...
随机推荐
- 1016 - Brush (II)
1016 - Brush (II) PDF (English) Statistics Forum Time Limit: 2 second(s) Memory Limit: 32 MB Afte ...
- 计算机视觉1->opencv4学习指南1 | 环境配置与例程
opencv虽然很有名,但是自己一直没怎么玩过,暑假的时候使用深度相机做项目,但负责的不是代码模块,也只是配好了环境,没有继续了解图像处理.最近电子实习老师有教这个东西,但是身边不少同学遇到了麻烦,所 ...
- AI实战分享 | 基于CANN的辅助驾驶应用案例
摘要:什么是辅助驾驶?简而言之,就是借助汽车对周围环境的自动感知和分析,让驾驶员预先察觉可能发生的危险,有效增加汽车驾驶的舒适性和安全性. 导读:基于昇腾AI异构计算架构CANN的辅助驾驶AI应用实战 ...
- MySQL中视图的定义、原理--触发器
视图概述 视图是一个虚拟表,其内容由查询定义.同真实的表一样,视图包含一系列带有名称的列和行数据.但是,视图并不在数据库中以存储的数据值集形式存在.行和列数据来自由定义视图的查询所引用的表,并且在引用 ...
- MySQL数据操作与查询笔记 • 【第5章 MySQL 函数】
全部章节 >>>> 本章目录 5.1 数学函数和控制流函数 5.1.1 数学函数 5.1.2 控制流函数 5.2 字符串函数 5.2.1 字符串函数介绍 5.2.2 字符串 ...
- 编写Java程序,应用客户端和服务端通过 Eclipse 控制台的输入和显示实现简易的聊天功能
查看本章节 查看作业目录 需求说明: 应用客户端和服务端通过 Eclipse 控制台的输入和显示实现简易的聊天功能 实现思路: 创建 Java 项目,在项目中创建服务端类 ChatServerThre ...
- Star Way To Heaven
题目描述 小 x伤心的走上了 Star way to heaven. 到天堂的道路是一个笛卡尔坐标系上一个 n*m的长方形通道 顶点在0,0 和 . 小 n,m 从最左边任意一点进入,从右边任意一点走 ...
- MySQL存储过程入门基础
创建存储过程无参语法: delimiter // create procedure 函数名() begin 业务逻辑 end // call 函数名() 通过函数名调用存储过程 创建存储过程有参与法: ...
- JMeter_用户自定义变量
在实际测试过程中,我们经常会碰到脚本开发时与测试执行时的服务地址不一样的情况,为了方便,我们会把访问地址参数化,当访问地址变化了,我们只需要把参数对应的值改动一下就可以了. 一.添加用户自定义变量元件 ...
- Java数据类型 long 与 Long 的区别 和 正确用法
1.区别 (1) long 是 基本类型 [类似于 int] Long 是 对象类型 [类似于Integer] (2) long 默认值是 0 Long 默认值是 null 2.比较方法 (1) ...