由于支持问题,未使用 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. 【LeetCode】528. Random Pick with Weight 解题报告(Python)

    作者: 负雪明烛 id: fuxuemingzhu 个人博客: http://fuxuemingzhu.cn/ 题目地址:https://leetcode.com/problems/random-pi ...

  2. Collision(hdu5114)

    Collision Time Limit: 15000/15000 MS (Java/Others)    Memory Limit: 512000/512000 K (Java/Others)Tot ...

  3. uniapp跳转webview后H5不执行UniAppJSBridgeReady 回调无用

    开始时我在真机上测试使用 <web-view :src="'/hybrid/html/pages/index/index.html?userInfo='+JSON.stringify( ...

  4. 基于Spring MVC + Spring + MyBatis的【银行卡系统】

    资源下载:https://download.csdn.net/download/weixin_44893902/45604256 练习点设计: 删除.新增 一.语言和环境 实现语言:JAVA语言. 环 ...

  5. 编写Java程序,用户在网上购买商品(good),当用户买了一本书(book)、一顶帽子(hat)或者买了一双鞋子(shoe),卖家就会通过物流将商品邮寄给用户,使用简单工厂模式模拟这一过程。

    查看本章节 查看作业目录 需求说明: 编写Java程序,用户在网上购买商品(good),当用户买了一本书(book).一顶帽子(hat)或者买了一双鞋子(shoe),卖家就会通过物流将商品邮寄给用户, ...

  6. Java面向对象笔记 • 【第5章 异常处理】

    全部章节   >>>> 本章目录 5.1 异常概述 5.1.1 程序中的异常 5.1.2 异常分类 5.1.3 实践练习 5.2 try-catch处理异常 5.2.2 使用f ...

  7. gPRC基本介绍

    1.说明 gRPC英文全名为Google Remote Procedure Call, 即Google远程过程调用, 是Google发布的一个高性能.通用的开源RPC框架, 2.gRPC定义 gRPC ...

  8. 【工控老马】OPC通讯协议解析-OPC七问

    1 通讯步骤 1.1 第一问 OPC Client和OPC Server之间通讯谁是主动的? 答:当然是OPC Client. 1.2 第二问 OPC Client第一次动作做了什么? 答:从大多数O ...

  9. PHP 中的回调函数

    回调函数就是在主进程执行过程中,满足某个条件后,跳转到预先设置好的函数中去执行的一种函数. 举例说明: 张三到一个水果店买苹果,刚好苹果卖完了,于是张三在店员那里留下了自己的电话,一个小时后店里有货了 ...

  10. shell2-if判断2

    1.条件判断if 判断条件:then //单分支语句 命令1 命令2fi 例子: #!/bin/bash ls if [ $? -eq 0 ]; then echo "执行成功了" ...