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等,运用到项目中集中处理会很方便. 技术层面没有什么好说的,请求是 ...
随机推荐
- 【Java笔记】Java分包问题
这个图讲的很清晰,转自-http://www.bubuko.com/infodetail-2219664.html
- css--深入理解z-index引发的层叠上下文、层叠等级和层叠顺序
前言 在编写css样式代码的时候,我们经常会遇到z-index属性的使用,我们可能只了解z-index能够提高元素的层级,并不知道具体是怎么实现的.本文就来总结一个由z-index 引发的层叠上下文和 ...
- OverFeat:Integrated Recognition, Localization and Detection using Convolutional Networks
目录 概 主要内容 Sermanet P., Eigen D., Zhang X., Mathieu M., Fergus R., LeCun Y. OverFeat:integrated recog ...
- 本地修改配置hosts文件解决Github加载慢问题
本地修改配置hosts文件解决Github加载慢问题 手动方式 hosts 文件在每个系统的位置不一,详情如下: Windows 系统:C:\Windows\System32\drivers\etc\ ...
- SQLServer中的CTE(Common Table Expression)通用表表达式使用详解
概述 我们经常会编写由基本的 SELECT/FROM/WHERE 类型的语句派生而来的复杂 SQL 语句.其中一种方案是需要编写在 FROM 子句内使用派生表(也称为内联视图)的 Transact-S ...
- JAX-MD在近邻表的计算中,使用了什么奇技淫巧?(一)
技术背景 JAX-MD是一款基于JAX的纯Python高性能分子动力学模拟软件,应该说在纯Python的软件中很难超越其性能.当然,比一部分直接基于CUDA的分子动力学模拟软件性能还是有些差距.而在计 ...
- 使用.NET 6开发TodoList应用(17)——实现数据塑形
系列导航及源代码 使用.NET 6开发TodoList应用文章索引 需求 在查询的场景中,还有一类需求不是很常见,就是在前端请求中指定返回的字段,所以关于搜索的最后一个主题我们就来演示一下关于数据塑形 ...
- 图解四种 IO 模型
最近越来越认为,在讲解技术相关问题时,大白话固然很重要,通俗易懂,让人有想读下去的欲望.但几乎所有的事,都有两面性,在看到其带来好处时,不妨想想是否也引入了不好的地方. 例如在博客中,过于大白话的语言 ...
- 【Spring专场】「IOC容器」不看源码就带你认识核心流程以及运作原理
这是史上最全面的Spring的核心流程以及运作原理的分析指南 [Spring核心专题]「IOC容器篇」不看繁琐的源码就带你浏览Spring的核心流程以及运作原理 [Spring核心专题]「AOP容器篇 ...
- 初识python: 自定义函数
什么是函数? 函数是组织好的,可重复使用的,用来实现单一,或相关联功能的代码段.函数能提高应用的模块性,和代码的重复利用率. 函数的定义方法: def test(x): '函数定义方法' x+=1 r ...