zoukankan      html  css  js  c++  java
  • 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;
    }

      

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

  • 相关阅读:
    nginx 相关命令
    uni-app跨域解决
    vue-cli3.0的项目搭建
    vue.js
    Flex布局
    javascript 数组排重
    IE的hack问题浅谈
    div自身高度、屏幕高度
    bootstrap轮播和百叶窗
    面向对象
  • 原文地址:https://www.cnblogs.com/jingxuan-li/p/11766759.html
Copyright © 2011-2022 走看看