django csrf cookie不再工作 [英] django csrf cookie no longer working

查看:184
本文介绍了django csrf cookie不再工作的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

我不明白为什么,但Django已经停止在响应中包含csrf cookie。我启用了中间件,尝试使用RequestContext并且使用了render。我甚至尝试使用csrf_protect和requires_csrf_token装饰器。



我现在正在开发一个服务器,我可以在使用RequestContext之后打印上下文,似乎包括csrf_token。



但是,当我使用Chrome的检查元素查看实际的标题时,csrf_token不在,当我使用控制台并输入



帮助!



这是一个示例视图

  @requires_csrf_token 
def index(request):
context = RequestContext(request,{'foo':' bar'})
print context
return render(request,'index.html',context)

CSRF令牌似乎在上下文中:

  {u'csrf_token':< django。 utils.functional .__ proxy__对象在0x1025ab990>},... 

但它没有办法THROU gh ...

 接受:text / html,application / xhtml + xml,application / xml; q = 0.9,* / *; q = 0.8 
Accept-Charset:ISO-8859-1,utf-8; q = 0.7,*; q = 0.3
接受编码:gzip,deflate,sdch
接受-Language:en-US,en; q = 0.8
连接:keep-alive
Cookie:__ utma = 96992031.468590559.1369255550.1369255550.1369255550.1; __utmb = 96992031.17.10.1369255550; __utmc = 96992031; __utmz = 96992031.1369255550.1.1.utmcsr =(direct)| utmccn =(direct)| utmcmd =(none)
主机:127.0.0.1:8000
引用:http://127.0.0.1:8000 /
用户代理:Mozilla / 5.0(Macintosh; Intel Mac OS X 10_7_5)AppleWebKit / 537.31(KHTML,像Gecko)Chrome / 26.0.1410.65 Safari / 537.31
pre>

更新:这是我使用的模板:

  {%extendsbase.html%} 

{%block hello%}
基本股票事件图表
{%endblock%}

{%block content%}


< div id =leftsidebar>
< p>使用此工具绘制安全性的时间序列数据。您可以绘制一个安全性和
四个其他功能,如卷,调用期权量或隐含波动率。该工具将
放大感兴趣的日期,以显示目标受众在事件之前的所选
vaiable中的更改。由于在公布之前变量的大幅度变动,
可能会有助于使用最小和最大的工具来放大事件的
。 < / p为H.
< div class =ui-widget inline>
< label for =证券> 1。键入代码符号< / label>
< input id =证券>
< / div>
< div class =inline>< input type =buttonid =reloadvalue =Resetclass =hide/>< / div>

< label for =datepicker> 2。选择您感兴趣的活动日期。< / label>
< input type =textid =datepickerdisabled />

< label> 3。选择其他系列图表。< / label>
< p>< strong>主轴< / strong>< / p>
左轴:< select id =series1class =selectpicker span2disabled>< option value =>< / option>< / select>
< div id =series1minmaxclass =hide>
最小< input type =textid =min1class =input-mini/>& nbsp;
Max< input type =textid =max1class =input-mini/>
< / div>< input type =buttonid =addaxes1value =Graphclass =hide/>
< input type =buttonid =removeaxes1value =Removeclass =hide/>< br />

< br />右轴:< select id =series2class =selectpicker span2disabled>< option value =>< / option>>< ; /选择>
< div id =series2minmaxclass =hide>
最小< input type =textid =min2class =input-mini/>& nbsp;
最大< input type =textid =max2class =input-mini/>
< / div>< input type =buttonid =addaxes2value =Graphclass =hide/>
< input type =buttonid =removeaxes2value =Removeclass =hide/>< br />

< input type =buttonid =addextraaxisvalue =添加附加轴禁用/>< br />

< div id =additionalclass =hide>
< p>< strong>附加轴< / strong>< / p>
左轴:< select id =series3class =selectpicker span2disabled>< option value =>< / option>< / select>
< div id =series3minmaxclass =hide>
最小< input type =textid =min3class =input-mini/>& nbsp;
Max< input type =textid =max3class =input-mini/>
< / div>< input type =buttonid =addaxes3value =Graphclass =hide/>
< input type =buttonid =removeaxes3value =Removeclass =hide/>< br />

< br />右轴:< select id =series4class =selectpicker span2disabled>< option value =>< / option>>< ; /选择>
< div id =series4minmaxclass =hide>
最小< input type =textid =min4class =input-mini/>& nbsp;
最大< input type =textid =max4class =input-mini/>
< / div>< input type =buttonid =addaxes4value =Graphclass =hide/>
< input type =buttonid =removeaxes4value =Removeclass =hide/>< br />
< / div>

< / div>
< div id =rightsidebar>
< div id =containerclass =hide>< / div>
< / div>
< / div>


< script src =http://code.highcharts.com/stock/highstock.js>< / script>
< script src =http://code.highcharts.com/modules/exporting.js>< / script>
< script src =http://code.highcharts.com/stock/highcharts-more.js>< / script>

< script>

$(function(){
$(#removefromchart)。click(function(){
var conceptName = $('#savedseries')。 :select();
});

$(#reload)点击(function(){
location.reload();

$ b $(#addextraaxis)。click(function(){
$(#additional)。removeClass(hide);
this .disabled = true
$(#addextraaxis)。addClass(hide);
var chart = $(#container)。highcharts();
chart.setSize null,650);
})
});

$(function(){
$(#series1)。change(function(){
$(#addaxes1)。removeClass(hide ;
});
$(#series2)。change(function(){
$(#addaxes2)。removeClass(hide);
} );
$(#series3)。change(function(){
$(#addaxes3)。removeClass(hide);
});
$(#series4)。change(function(){
$(#addaxes4)。removeClass(hide);
});
});


$(function(){
function setExtreme(isMin,axis,value){
console.log(fired);
var图表= $('#container')。highcharts();
if(isMin){
console.log(value ++ chart.yAxis [axis] .getExtremes()[max ])
chart.yAxis [axis] .setExtremes(value,chart.yAxis [axis] .getExtremes()[max]);
} else {
console.log ++ chart.yAxis [axis] .getExtremes()[min])
chart.yAxis [axis] .setExtremes(chart.yAxis [axis] .getExtremes()[min],value );
}
console.log(value);
}


函数getAxisNumber(系列){
var indicies = {}
$ .each(chart.yAxis,function(index,element){
indicies [element.options.id] = index;
console.log(element.options.id); $


$(#max1)。change(function() {setExtreme(0,getAxisNumber(#series1),this.value)});
$(#min1)。change(function(){setExtreme(1,getAxisNumber(#series1),this.value)});
$(#max2)。change(function(){setExtreme(0,getAxisNumber(#series2),this.value)});
$(#min2)。change(function(){setExtreme(1,getAxisNumber(#series2),this.value)});
$(#max3)。change(function(){setExtreme(0,getAxisNumber(#series3),this.value)});
$(#min3)。change(function(){setExtreme(1,getAxisNumber(#series3),this.value)});
$(#max4)。change(function(){setExtreme(0,getAxisNumber(#series4),this.value)});
$(#min4)。change(function(){setExtreme(1,getAxisNumber(#series4),this.value)});

});

$(function()
{
$(#removefromchart)。click(function()
{
var conceptName = $ #savedseries')find(:selected)。remove();
});
});

$(function(){

function addPlotLine(ts){
var chart = $('#container')。highcharts();
chart.xAxis [0] .addPlotBand({
from:ts,
to :((ts + 86400000)* 365),
color:'rgba(68,170,213, 0.2)',
id:'tsband'
});
chart.xAxis [0] .addPlotLine({
value:ts,
color:'rgb (255,0,0)',
width:1,
id:'tsline'
});
chart.xAxis [0] .setExtremes(ts - (86400000 * 30),ts + 86400000)
}

函数removeEventIfExists(){
var chart = $(#container)。highcharts()
图表。 xAxis [0] .removePlotBand(tsband);
chart.xAxis [0] .removePlotLine(tsline);
}

$(#datepicker) .datepicker({
showButtonPanel:true,/ * by oussama * /
changeMonth:true,/ * added by oussama * /
changeYear:oussama添加/ * b $ b dateFormat:'yy-mm-dd',
onSelect:function(dateText,inst){
utcDate = Date.UTC(dateText.split( - )[0],dateText.split( - )[1] - 1,dateText.split( - )[2]);
removeEventIfExists();
addPlotLine(utcDate);
$(#series1)。removeAttr(disabled);
$(#series2)。removeAttr(disabled);
$(#series3)。removeAttr(disabled);
$(#series4)。removeAttr(disabled);
$(#addextraaxis)。removeAttr(disabled);
var ticker = $(#securities)。val();
var date = $(#datepicker)。val();
chart.setTitle({text:ticker +around+ date});
}
})


});

$(function(){

function createChart(){
var chart = $('#container')。highcharts();
var options = {chart:{
renderTo:'container',
height:450,
},
events:{
load:function(event){
this.setExtremes();
}
},
rangeSelector:{
enabled:false,
},
exporting:{
启用:false,
},
导航器:{
启用:true,
系列:{id:'navigator'},
},
yAxis:[{
标题:{
text:'Price'
},
height:150,
}],


},

chart = new Highcharts.StockChart(options);
返回图表;
}

$(#证券)。autocomplete({
source:/ api / get_securities /,
minLength:1,
选择:function(event,ui){
var ticker = ui.item.label;
getSeries(ticker);
chart = createChart();
getTimeSeriesData(ticker + | | | | | | | | | | | | | | | | | | | | | | | | | | $ b $($#重新加载')removeClass(hide);
chart.setTitle({text:ticker});
this.disabled ='disabled';
},
}) ;
});

$(function(){

函数removeAxes(id){
var chart = $('#container')highcharts(); $ b $ click(function(){
console.log(removeaxes1 clicked)($($($)$)

$ b $(#removeaxes1 );
removeAxes(#series1);
$(#removeaxes1)。addClass(hide);
$(#series1minmax)addClass
$(#series1minmax)removeClass(inline);
$(#series1)。val();
$(#min1 ).val();
$(#max1)。val();
$(#series1)。removeAttr(disabled);
} );

$(#removeaxes2)。click(function(){
console.log(removeaxes2 clicked);
removeAxes(#series2);
$(#removeaxes2)。addClass(hide);
$(#series2minmax)。addClass(hide);
$(#series2minmax)。 removeClass(inline);
$(#series2)。val();
$(#min2)。val();
$(#max2)。val();
$(#series2)。removeAttr(disabled);
});

$(#removeaxes3)。click(function(){
console.log(removeaxes3 clicked);
removeAxes(#series3);
$ b $(#series3minmax)addClass(#remove3)addClass(# inline);
$(#series3)。val();
$(#min3)。val();
$(#max3 ).val();
$(#series3)。removeAttr(disabled);
});

$(#removeaxes4)。click(function(){
console.log(removeaxes4 clicked);
removeAxes(#series4);
$(#removeaxes4)addClass(hide);
$(#series4minmax)addClass(hide);
$(#series4minmax)removeClass inline);
$(#series4)。val();
$(#min4)。val();
$(#max4 ).val();
$(#series4)。removeAttr(disabled);
});

函数addSeries(id,minMaxId,isOpposite,isAdditional){

var chart = $('#container')。
indicies = {}
console.log('climlckedaddaxes');
var series = $(id).val()
var top = 210
if(isAdditional)top = 380
var options = {
title:{
文本:series.split(|)[1]
},
顶部:顶部,
高度:150,
对面:isOpposite,
id:id,
offset:-30
}
chart.addAxis(options)
$ .each(chart.yAxis,function(index,element){
indicies [element.options.id] = index;
console.log(element.options.id);
});
getTimeSeriesData(series,indicies [id]);
$(minMaxId).removeClass(hide)
$(minMaxId).addClass(inline)
}

$(#addaxes1) .click(function(){
addSeries('#series1','#series1minmax',false,false);
$(#addaxes1)addClass(hide)
$(#removeaxes1)。removeClass(hide)
$(#series1)。attr(disabled,disabled)
});

$(#addaxes2)。click(function(){
addSeries('#series2',#series2minmax,true,false);
$ #addaxes2)addClass(hide)
$(#removeaxes2)removeClass(hide)
$(#series2)。attr(disabled,disabled )
});

$(#addaxes3)。click(function(){
addSeries('#series3',#series3minmax,false,true);
$ #addaxes3)addClass(hide)
$(#removeaxes3)removeClass(hide)
$(#series3)。attr(disabled,disabled )
});

$(#addaxes4)。click(function(){
addSeries('#series4',#series4minmax,true,true);
$ #addaxes4)addClass(hide)
$(#removeaxes4)removeClass(hide)
$(#series4)。attr(disabled,disabled )
});

})

$('#addtochart')。click(function(){
var selectedValues = $('#seriesselector' ;
$ .each(selectedValues,function(index,value){
$('#savedseries')。append($('< option>',{
value:value,
text:value,
selected:true,
}));
$('#seriesselector option [value ='+ value +']')remove );
});
});

函数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]);
//这个cookie字符串是否以我们想要的名字开头?
if(cookie.substring(0,name.length + 1)==(name +'=')){
cookieValue = decodeURIComponent(cookie.substring(name.length + 1));
break;
}
}
}
return cookieValue;
}

函数parseDate(inputdate,value){
var date = inputdate;
var year = parseInt(date.split( - )[0]);
var month = parseInt(date.split( - )[1]) - 1;
var day = parseInt(date.split( - )[2]);
var outputdate = Date.UTC(年,月,日);
if(year == 2013&& month == 3){
//console.log(inputdate,outputdate,value);
}
return outputdate;
};

函数getTimeSeriesData(seriesName,axis){
var csrftoken = getCookie('csrftoken');
console.log('csrftoken is ::'+ csrftoken);
$ .ajax({//创建一个AJAX调用...
beforeSend:function(xhr,settings){
var csrftoken = getCookie('csrftoken');
xhr .setRequestHeader(X-CSRFToken,csrftoken);
},
data:{'seriesName':seriesName},//获取表单数据
type:'POST',
url:'/ api / get_time_series_data /',
success:function(response){// on success ..
console.log(response);
var series = {}
系列['name'] = response [0] ['series_name'];
系列['data'] = []
$ .each(response,function(index,value)
series ['data'] [index] = [
parseDate(response [index] ['date'],response [index] ['value']),
parseFl oat(response [index] ['value'])
];
});
系列['yAxis'] =轴
系列['标记'] = {
启用:真,
半径:3
}
var chart = $('#container')。highcharts();
chart.addSeries(系列);
var nav = chart.get('navigator');
if(axis == 0)nav.setData(series ['data']);
}
});
返回false;
};

函数getSeries(ticker){
var csrftoken = getCookie('csrftoken');
$ .ajax({//创建一个AJAX调用...
beforeSend:function(xhr,settings){
var csrftoken = getCookie('csrftoken');
xhr .setRequestHeader(X-CSRFToken,csrftoken);
},
data:{'ticker':ticker},//获取表单数据
类型:'POST',
url:'/ api / get_series /',
success:function(response){// on success ..
$('#seriesselector')。empty()
for var i = 0; i< response.length; i ++){
if(response [i] .value =='PX_LAST')continue;
$('#series1')。append ('< option>',{
value:ticker +|+ response [i] .value,
text:response [i] .value
}));
$('#series2 ').append($('< option>',{
value:ticker +|+ response [i] .value,
text:response [i] .value
}));
$('#series3')。append($('< option>',{
value:ticker +|+ response [i] .value,
text:response [i] .value
}));
$('#series4')。append($('< option>',{
value:ticker +|+ response [i] .value,
text:response [i] .value
}));
}
}
});
返回false;
};

< / script>

{%endblock%}


解决方案

p>结果你需要

  {%csrf_token%} 

无论您是否发布html表单。我只是在做AJAX请求,但Django不会在响应头中包含令牌,除非它看到它的模板。


I don't understand why, but Django has ceased including the csrf cookie in responses. I have the middleware enabled, have tried using RequestContext and am using render. I have even tried using the csrf_protect and requires_csrf_token decorators.

I am working on a dev server right now, and I can print the context after I use RequestContext, and it seems to include a csrf_token.

But when I look at the actual headers using Chrome's inspect element, the csrf_token isn't there, also when I use the console and type in "document.cookie" that does not have the csrf token.

HELP!

Here's an example view

@requires_csrf_token
def index(request):
    context = RequestContext(request, {'foo':'bar'})
    print context
    return render(request, 'index.html', context)

The CSRF token seems to be in the context:

{u'csrf_token':         <django.utils.functional.__proxy__ object at 0x1025ab990>}, ...

But it fails to make its way through...

Accept:text/html,application/xhtml+xml,application/xml;q=0.9,*/*;q=0.8
Accept-Charset:ISO-8859-1,utf-8;q=0.7,*;q=0.3
Accept-Encoding:gzip,deflate,sdch
Accept-Language:en-US,en;q=0.8
Connection:keep-alive
Cookie:__utma=96992031.468590559.1369255550.1369255550.1369255550.1; __utmb=96992031.17.10.1369255550; __utmc=96992031; __utmz=96992031.1369255550.1.1.utmcsr=(direct)|utmccn=(direct)|utmcmd=(none)
Host:127.0.0.1:8000
Referer:http://127.0.0.1:8000/
User-Agent:Mozilla/5.0 (Macintosh; Intel Mac OS X 10_7_5) AppleWebKit/537.31 (KHTML, like Gecko) Chrome/26.0.1410.65 Safari/537.31

UPDATE: Here is the template I'm using:

{% extends "base.html" %}

{% block hello %}
Basic Stock Event Charts
{% endblock %}

{% block content %}


  <div id="leftsidebar">
  <p>Use this tool to graph a time series data for a security. You can graph a security and
  four other features such as volume, call option volume, or implied volatility. The tool will 
  zoom in on the date of interest to show the target audience the changes in the selected
  vaiables preceeding the event. Because of large movement in variables before the announcement,
  it may be helpful to use the minimum and maximum tools to zoom in on smaller movements ahead
  of the event. </p>
    <div class="ui-widget inline">
        <label for="securities">1. Type in a ticker symbol</label>
        <input id="securities">
    </div>
    <div class="inline"><input type="button" id="reload" value="Reset" class="hide" /></div>

    <label for="datepicker">2. Pick your event date of interest.</label>
    <input type="text" id="datepicker" disabled />

    <label>3. Choose other series to graph.</label>
    <p><strong>Primary Axis</strong></p>
      Left Axis: <select id="series1" class="selectpicker span2" disabled><option value=""></option></select>
        <div id="series1minmax" class="hide">
            Min <input type="text" id="min1" class="input-mini" />&nbsp;
            Max <input type="text" id="max1" class="input-mini" />
        </div><input type="button" id="addaxes1" value="Graph" class="hide" />
        <input type="button" id="removeaxes1" value="Remove" class="hide" /><br />

      <br/>Right Axis: <select id="series2" class="selectpicker span2" disabled><option value=""></option>></select>
        <div id="series2minmax" class="hide">
            Min <input type="text" id="min2" class="input-mini" />&nbsp;
            Max <input type="text" id="max2" class="input-mini" />
        </div><input type="button" id="addaxes2" value="Graph" class="hide" />
        <input type="button" id="removeaxes2" value="Remove" class="hide" /><br />

        <input type="button" id="addextraaxis" value="Add Additional Axis" disabled/><br />

      <div id="additional" class="hide">
      <p><strong>Additional Axis</strong></p>
      Left Axis: <select id="series3" class="selectpicker span2" disabled><option value=""></option></select>
        <div id="series3minmax" class="hide">
            Min <input type="text" id="min3" class="input-mini" />&nbsp;
            Max <input type="text" id="max3" class="input-mini" />
        </div><input type="button" id="addaxes3" value="Graph" class="hide" />
        <input type="button" id="removeaxes3" value="Remove" class="hide" /><br />

      <br/>Right Axis: <select id="series4" class="selectpicker span2" disabled><option value=""></option>></select>
        <div id="series4minmax" class="hide">
            Min <input type="text" id="min4" class="input-mini" />&nbsp;
            Max <input type="text" id="max4" class="input-mini" />
        </div><input type="button" id="addaxes4" value="Graph" class="hide" />
        <input type="button" id="removeaxes4" value="Remove" class="hide" /><br />
      </div>

  </div>
  <div id="rightsidebar">
    <div id="container" class="hide"></div>
    </div>
  </div>


<script src="http://code.highcharts.com/stock/highstock.js"></script>
<script src="http://code.highcharts.com/modules/exporting.js"></script>
<script src="http://code.highcharts.com/stock/highcharts-more.js"></script>

<script>

$(function() {
  $("#removefromchart").click(function() {
      var conceptName = $('#savedseries').find(":selected").remove();
  });

  $("#reload").click(function() {
      location.reload();
  })

  $("#addextraaxis").click(function() {
      $("#additional").removeClass("hide");
      this.disabled = true
      $("#addextraaxis").addClass("hide");
      var chart = $("#container").highcharts();
      chart.setSize(null, 650);
  })
});

$(function() {
        $("#series1").change(function() {   
            $("#addaxes1").removeClass("hide");
        });
        $("#series2").change(function() {
            $("#addaxes2").removeClass("hide");
        });
        $("#series3").change(function() {
            $("#addaxes3").removeClass("hide");
        });
        $("#series4").change(function() {
            $("#addaxes4").removeClass("hide");
        });
});


$(function() {
    function setExtreme(isMin, axis, value) {
        console.log("fired");
        var chart = $('#container').highcharts();
        if (isMin) { 
            console.log(value + " " + chart.yAxis[axis].getExtremes()["max"])
            chart.yAxis[axis].setExtremes(value, chart.yAxis[axis].getExtremes()["max"]);
        } else {
            console.log(value + " " + chart.yAxis[axis].getExtremes()["min"])
            chart.yAxis[axis].setExtremes(chart.yAxis[axis].getExtremes()["min"], value);
        }
        console.log(value);
    }


    function getAxisNumber(series) {
        var indicies = {}
        $.each(chart.yAxis, function(index, element) {
            indicies[element.options.id] = index;
            console.log(element.options.id);
        });
        return indicies[series]
    }

    $("#max1").change(function() {setExtreme(0, getAxisNumber("#series1"), this.value)});
    $("#min1").change(function() {setExtreme(1, getAxisNumber("#series1"), this.value)});
    $("#max2").change(function() {setExtreme(0, getAxisNumber("#series2"), this.value)});
    $("#min2").change(function() {setExtreme(1, getAxisNumber("#series2"), this.value)});
    $("#max3").change(function() {setExtreme(0, getAxisNumber("#series3"), this.value)});
    $("#min3").change(function() {setExtreme(1, getAxisNumber("#series3"), this.value)});
    $("#max4").change(function() {setExtreme(0, getAxisNumber("#series4"), this.value)});
    $("#min4").change(function() {setExtreme(1, getAxisNumber("#series4"), this.value)});

});

$(function()
        {
          $("#removefromchart").click(function()
          {
              var conceptName = $('#savedseries').find(":selected").remove();
          });
        });

$(function() {

    function addPlotLine(ts) {
        var chart = $('#container').highcharts();
        chart.xAxis[0].addPlotBand({
            from: ts,
            to: ((ts + 86400000) * 365),
            color: 'rgba(68, 170, 213, 0.2)',
            id: 'tsband'
        });
        chart.xAxis[0].addPlotLine({
            value: ts,
            color: 'rgb(255, 0, 0)',
            width: 1,
            id: 'tsline'
        });
        chart.xAxis[0].setExtremes(ts - (86400000 * 30), ts + 86400000)
        }

    function removeEventIfExists() {
        var chart = $("#container").highcharts()
        chart.xAxis[0].removePlotBand("tsband");
        chart.xAxis[0].removePlotLine("tsline");
    }

    $("#datepicker").datepicker({
        showButtonPanel: true,  /*added by oussama*/
        changeMonth: true, /*added by oussama*/
        changeYear: true, /*added by oussama*/
        dateFormat: 'yy-mm-dd',
        onSelect: function (dateText, inst) {
            utcDate = Date.UTC(dateText.split("-")[0], dateText.split("-")[1] - 1, dateText.split("-")[2]);
            removeEventIfExists();
            addPlotLine(utcDate);
            $("#series1").removeAttr("disabled");
            $("#series2").removeAttr("disabled");
            $("#series3").removeAttr("disabled");
            $("#series4").removeAttr("disabled");
            $("#addextraaxis").removeAttr("disabled");
            var ticker = $("#securities").val();
            var date = $("#datepicker").val();
            chart.setTitle({text: ticker + " around " + date});
        }
    });


  });

$(function() {

    function createChart() {
        var chart = $('#container').highcharts();
        var options = {chart: { 
                           renderTo: 'container',
                           height: 450,
                       },
                       events: {
                           load: function(event) {
                               this.setExtremes();
                           }
                       },
                       rangeSelector: {
                         enabled: false,
                       },
                       exporting: {
                           enabled: false,
                       },
                       navigator: {
                             enabled: true,
                             series: { id: 'navigator' },
                       },
                        yAxis: [{
                            title: {
                                text: 'Price'
                            },
                            height: 150,
                        }],


            },

        chart = new Highcharts.StockChart(options);
        return chart;
    }

  $("#securities").autocomplete({
    source: "/api/get_securities/",
    minLength: 1,
    select: function(event, ui) {
        var ticker = ui.item.label;
        getSeries(ticker);
        chart = createChart();
        getTimeSeriesData(ticker + "|PX_LAST", 0);
        $('#container').show();
        $('#datepicker').removeAttr("disabled");
        $('#reload').removeClass("hide");
        chart.setTitle({text: ticker});
        this.disabled = 'disabled';
    },
  });
});

$(function() {

    function removeAxes(id) {
        var chart = $('#container').highcharts();
        chart.get(id).remove();
    }

    $("#removeaxes1").click(function() {
        console.log("removeaxes1 clicked");
        removeAxes("#series1");
        $("#removeaxes1").addClass("hide");
        $("#series1minmax").addClass("hide");
        $("#series1minmax").removeClass("inline");
        $("#series1").val("");
        $("#min1").val("");
        $("#max1").val("");
        $("#series1").removeAttr("disabled");
    });

    $("#removeaxes2").click(function() {
        console.log("removeaxes2 clicked");
        removeAxes("#series2");
        $("#removeaxes2").addClass("hide");
        $("#series2minmax").addClass("hide");
        $("#series2minmax").removeClass("inline");
        $("#series2").val("");
        $("#min2").val("");
        $("#max2").val("");
        $("#series2").removeAttr("disabled");
    });

    $("#removeaxes3").click(function() {
        console.log("removeaxes3 clicked");
        removeAxes("#series3");
        $("#removeaxes3").addClass("hide");
        $("#series3minmax").addClass("hide");
        $("#series3minmax").removeClass("inline");
        $("#series3").val("");
        $("#min3").val("");
        $("#max3").val("");
        $("#series3").removeAttr("disabled");
    });

    $("#removeaxes4").click(function() {
        console.log("removeaxes4 clicked");
        removeAxes("#series4");
        $("#removeaxes4").addClass("hide");
        $("#series4minmax").addClass("hide");
        $("#series4minmax").removeClass("inline");
        $("#series4").val("");
        $("#min4").val("");
        $("#max4").val("");
        $("#series4").removeAttr("disabled");
    });

    function addSeries(id, minMaxId, isOpposite, isAdditional) {

        var chart = $('#container').highcharts();
        indicies = {}
        console.log('climlckedaddaxes');
        var series = $(id).val()
        var top = 210
        if (isAdditional) top = 380
        var options = {
            title: {
                text: series.split("|")[1]
            },
            top: top,
            height: 150,
            opposite: isOpposite,
            id: id,
            offset: -30
        }
        chart.addAxis(options)
        $.each(chart.yAxis, function(index, element) {
            indicies[element.options.id] = index;
            console.log(element.options.id);
        });
        getTimeSeriesData(series, indicies[id]);
        $(minMaxId).removeClass("hide")
        $(minMaxId).addClass("inline")
    }

    $("#addaxes1").click(function() {   
        addSeries('#series1', "#series1minmax", false, false);  
        $("#addaxes1").addClass("hide")
        $("#removeaxes1").removeClass("hide")
        $("#series1").attr("disabled", "disabled")
    });

    $("#addaxes2").click(function() {           
        addSeries('#series2', "#series2minmax", true, false);
        $("#addaxes2").addClass("hide")
        $("#removeaxes2").removeClass("hide")
        $("#series2").attr("disabled", "disabled")
    });

    $("#addaxes3").click(function() {           
        addSeries('#series3', "#series3minmax", false, true);
        $("#addaxes3").addClass("hide")
        $("#removeaxes3").removeClass("hide")
        $("#series3").attr("disabled", "disabled")
    });

    $("#addaxes4").click(function() {           
        addSeries('#series4', "#series4minmax", true, true);
        $("#addaxes4").addClass("hide")
        $("#removeaxes4").removeClass("hide")
        $("#series4").attr("disabled", "disabled")
    });

})

$('#addtochart').click(function() {
  var selectedValues = $('#seriesselector').val();
  $.each(selectedValues, function(index, value) {
        $('#savedseries').append($('<option>', {
                                                value: value,
                                                text: value,
                                                selected: true,
                                                }));
        $('#seriesselector option[value="' + value +'"]').remove();
  });
});

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;
}

function parseDate(inputdate, value) {
    var date = inputdate;
    var year = parseInt(date.split("-")[0]);
    var month = parseInt(date.split("-")[1]) - 1;
    var day = parseInt(date.split("-")[2]);
    var outputdate = Date.UTC(year, month, day);
    if (year == 2013 && month == 3) {
        //console.log(inputdate, outputdate, value);
    }
    return outputdate;
};

function getTimeSeriesData(seriesName, axis) {
var csrftoken = getCookie('csrftoken');
console.log('csrftoken is :: ' + csrftoken);
  $.ajax({ // create an AJAX call...
                beforeSend: function(xhr, settings) {
                    var csrftoken = getCookie('csrftoken');
                    xhr.setRequestHeader("X-CSRFToken", csrftoken);
                },
                data: {'seriesName': seriesName }, // get the form data
                type: 'POST',
                url: '/api/get_time_series_data/',
                success: function(response) { // on success..
                    console.log(response);
                    var series = {}
                    series['name'] = response[0]['series_name'];
                    series['data'] = []
                    $.each(response, function(index, value) {
                        series['data'][index] = [
                            parseDate(response[index]['date'], response[index]['value']), 
                            parseFloat(response[index]['value'])
                            ];
                    });
                   series['yAxis'] = axis
                   series['marker'] = {
                           enabled : true,
                           radius : 3
                           }
                   var chart = $('#container').highcharts();
                   chart.addSeries(series);
                   var nav = chart.get('navigator');
                   if (axis == 0) nav.setData(series['data']);          
                }
            });
            return false;
};

function getSeries(ticker) {
var csrftoken = getCookie('csrftoken');  
  $.ajax({ // create an AJAX call...
                beforeSend: function(xhr, settings) {
                    var csrftoken = getCookie('csrftoken');
                    xhr.setRequestHeader("X-CSRFToken", csrftoken);
                },
                data: {'ticker': ticker }, // get the form data
                type: 'POST',
                url: '/api/get_series/',
                success: function(response) { // on success..
                    $('#seriesselector').empty()
                    for (var i = 0; i < response.length; i++) {
                        if (response[i].value == 'PX_LAST') continue;
                        $('#series1').append($('<option>', {
                                value: ticker + "|" + response[i].value,
                                text: response[i].value
                        }));
                        $('#series2').append($('<option>', {
                            value: ticker + "|" + response[i].value,
                            text: response[i].value
                        }));
                        $('#series3').append($('<option>', {
                            value: ticker + "|" + response[i].value,
                            text: response[i].value
                        }));
                        $('#series4').append($('<option>', {
                            value: ticker + "|" + response[i].value,
                            text: response[i].value
                        }));
                    }
                }
            });
            return false;
};

</script>

{% endblock %}

解决方案

Turns out you need the

{% csrf_token %}

regardless of whether or not you are posting a html form. I was only doing AJAX requests, but Django won't include the token in the response header unless it sees it the template.

这篇关于django csrf cookie不再工作的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!

查看全文
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆