von Javascript zu Python bei Klick

Question

Ich arbeite an einer Funktion für eine Heatmap. Wenn ich auf eine Zelle im Diagramm klicke, erscheint ein Boxplot, und ich verwende Django- und Highcharts-Modelle für die Implementierung.

Zur Zeit bin ich mit der Weitergabe von Variablen von einer Javascript-Funktion auf die Python-Server-Seite fest. Ich weiß für Django gibt es eine Post und Get-Methode, aber ich habe kein Formular in diesem Fall, nur die Klicks. Wenn ich auf eine Zelle in der Heatmap klicke, möchte ich die x-label- und y-label-Strings an den Python-Server übergeben, die Daten in python verarbeiten und abfragen und dann die Daten zurück in den Popup-Boxplot einspeisen. Vielen Dank !

$(function() { 

$('#container').highcharts({ 

    chart: { 
     type: 'heatmap' 
    }, 

    plotOptions: { 
     series: { 
     events:{ 
     click: function cellClick() { 
      var $div = $('<div></div>') 
      .dialog({ 
       title: this.name, 
       width: 400, 
       height: 300 
      }); 

      window.chart = new Highcharts.Chart({ 
       chart: { 
       renderTo: $div[0], 
       type: 'boxplot' 
      }, 

      series: [{ 
       name: 'Observations', 
       data: [ 
       //here I would like to insert data passed from the python view 
       // on click of a cell in the heatmap 
        ], 
      }, { 
       name: 'Outliers', 
       color: Highcharts.getOptions().colors[0], 
       type: 'scatter', 
       data: [//data from python view], 
      }] 
      }) 
       } 
      } 
     } 
    }, 

    xAxis: { 
     opposite: true, 
     categories: label, 
     labels:{ 
       formatter: function(){ 
       //I would like to pass factor_x to the server(python) on click 
       //of a cell in the heatmap 
        var factor_x = this.value; 

        if (factor_x.length > 6){ 
         return factor_x.substr(0,6) ; 
        }else{ 
         return factor_x; 
         } 
       } 
      }, 
    }, 


    yAxis: { 
     categories: label2, 
     labels:{ 
       formatter: function(){ 
       // pass factor_y to the server side on-click 
        var factor_y = this.value; 
        if (factor_y.length > 7){ 
         return factor_y.substr(0,7) + "..."; 
        }else{ 
         return factor_y; 
        } 
       } 
      }, 
    }, 

    series: [{ 
     name: 'Factor Correlation', 
     data: correlation, 
    }] 
    }); 
}); 

Answer 1

Okay, so was um Sie schreiben tun können Funktionen für die Zellen von Heatmaps klicken.

In den Onclick-Funktionen erhalten Sie den Wert dieser Zelle, indem Sie die Variable "this" in JavaScript verwenden, da Sie erfahren, auf welches Container- oder DOM-Element Sie geklickt haben.

So jetzt $ (this) .data oder was auch immer Attribut dieses Elements hat die erforderlichen Informationen (die Sie in Ihrem Browser auf Ihrer Konsole durch Inspektionselement überprüfen können) gibt Ihnen die Daten, die Sie an Ihre Ansichten senden möchten dass du es manipulieren kannst.

Also für, dass Sie eine andere Funktion aufrufen, sagen send_data() von dieser Onclick-Funktion und Sie werden dies erforderlich ist, um diese Funktion Informationen weitergeben vielleicht als ein oder zwei Variablen oder als Liste wie folgt aus:

send_data(info); 

wo info ist eine Liste aller erforderlichen Elemente.

nun in der send_data Funktion erhalten Sie einen Ajax-Aufruf an die URL der Klasse oder def in Ihren Ansichten entsprechend machen, an dem Sie diese Informationen so liefern wollen:

function send_data(req_info) { 

    $.ajax({ 
     type: "POST", 
     url: "/heatmap_cell_data/", 
     data: req_info, 
     // dataType: 'json', 

     success: function(response){ 
      console.log(response); 
     } 
    }); 
} 

Jetzt in Ihrem urls .py assoziieren Sie eine def/class in Ansichten, die der URL in Ihrer Ajax-Funktion entsprechen. Sie werden diese Daten in request.POST erhalten, dann werden Sie tun, was Sie in dieser Ansicht zu wollen, und schließlich ein Httpresponse zurückgeben (was auch immer Daten, die Sie wollen) an die Javascript zurück, die Sie als Antwort auf Ihre Erfolgsfunktion erhalten werden .

HINWEIS -> Senden einer HTTPRespnse von views.py zurück in die Ajax-Anfrage ist ein Muss, sonst werden Sie eine Fehlermeldung erhalten, dass kein Httpresponse gefunden.

Jetzt können Sie diese Antwortdaten verwenden, um wieder Ihre Heatmaps zu ändern.

Ich hoffe, das war das, was Sie suchen.

Answer 2

Der sicherste Weg, dies mit Django zu handhaben ist, die CSRF-Token zusammen mit jeder AJAX-Request Sie Daten veröffentlichen innerhalb passieren. Der einfachste Weg, dies zu tun, ist dies auf Ihrer Seite zu setzen (es scheint, Sie sind mit jQuery so sollte diese Arbeit wie):

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 csrfSafeMethod(method) { 
    // these HTTP methods do not require CSRF protection 
    return (/^(GET|HEAD|OPTIONS|TRACE)$/.test(method)); 
} 

var csrftoken = getCookie('csrftoken'); 
$.ajaxSetup({ 
    crossDomain: false, // obviates need for sameOrigin test 
    beforeSend: function(xhr, settings) { 
     if (!csrfSafeMethod(settings.type)) { 
      xhr.setRequestHeader("X-CSRFToken", csrftoken); 
     } 
    } 
}); 

Was das bedeutet ist den CSRF-Cookie greifen, dass Django normalerweise speichert im Browser wenn jemand auf ein Formular zugreift und es zusammen mit den AJAX-Anfragen sendet.

Dies bedeutet, dass Sie auch irgendwo so etwas wie dies auf der Seite benötigen:

<form> 
    {% csrf_token %} 
</form> 

Auf Ihrer View-Funktion, werden Sie die csrf_protect Dekorateur.

@require_post 
@csrf_protect 
def my_view(request): 
    pass 

Die idealste Art und Weise zu handhaben, die Funktionalität, die Sie suchen ist, wenn Sie ein Grundstück benötigen, schicken Sie es auf eine Ansicht wie die oben und dann: Sie können auch POST nur Daten zu dieser Ansicht verwenden require_post zu akzeptieren habe eine andere Ansicht, um die neuesten Ergebnisse zu erhalten. Dies funktioniert auch besser, wenn mehrere Personen gleichzeitig damit herumhantieren können.

In jQuery, die using something like würde bedeuten:

$.post('/my_view/', some_json_data); 

und die Daten zu sammeln, die Sie verwenden würden:

$.get('/my_view_updates/', success: somefunctiontoparseresponse);