单击即可从Javascript转换为Python

from Javascript to Python on click

本文关键字：转换 Python Javascript 单击      更新时间：2023-09-26

我正在为热图开发一个功能。当我点击图表中的一个单元格时，会弹出一个方框图，我使用django和highcharts模型来实现。

目前，我一直忙于将变量从javascript函数传递到python服务器端。我知道django有一个post-and-get方法，但在这种情况下我没有表单，只有点击。每当我点击热图中的一个单元格时，我都想将x标签和y标签字符串传递到python服务器，在python中处理和获取数据，然后将数据反馈到弹出的boxplot。非常感谢。

$(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,
    }]
  });
});

好的，您可以为热图的单元格编写点击函数。

在onclick函数中，您将通过使用javascript中的"this"变量来获取该单元格的值，因为它"告诉"您单击了哪个容器或DOM元素。

因此，现在$（this）.data或该元素的任何属性都具有所需的信息（您可以在控制台上的浏览器中通过检查元素来检查这些信息），它将为您提供您想要发送到视图的数据，以便您可以对其进行操作。

因此，您将从onclick函数中调用另一个函数，比如send_data（），并将所需信息作为一个或两个变量或像这样的列表传递给该函数：

send_data(info);

其中info是所有必需元素的列表。

现在，在send_data函数中，您将对视图中与类或def相对应的URL进行ajax调用，您希望向其提供以下信息：

function send_data(req_info) {
    $.ajax({
       type: "POST",
       url: "/heatmap_cell_data/",
       data: req_info,
       // dataType: 'json',
       success: function(response){ 
            console.log(response);
       }
    });
}

现在，在urls.py中，您将在与Ajax函数中的URL相对应的视图中关联一个def/类。您将在请求中收到这些数据。POST，然后您将在该视图中执行任何您想要的操作，并最终将HTTPResponse（无论您想要什么数据）返回到javascript，您将在成功函数中收到该响应。

注->必须从views.py向Ajax请求发送HTTPResponse，否则将出现未找到HTTPResponse的错误。

现在，您可以使用此响应数据再次修改热图。

我希望这就是你想要的。

Django处理此问题最安全的方法是将CSRF令牌与您在其中发布数据的每个AJAX请求一起传递。最简单的方法是把它放在你的页面上（看起来你正在使用jQuery，所以它应该按原样工作）：

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

这样做的目的是当有人访问表单时，获取Django通常存储在浏览器上的CSRF cookie，并将其与AJAX请求一起发送。

这意味着你在页面上的某个地方也需要这样的东西：

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

在视图函数中，您将需要csrf_protect装饰器。您也可以使用require_post只接受此视图上的POST数据：

@require_post
@csrf_protect
def my_view(request):
    pass

处理您正在寻找的功能的最理想方法是，当您需要绘图时，将其发布到如上所述的视图中，然后使用另一个视图来获取最新结果。如果多个人可以同时处理它，这也会更好。

在jQuery中，这意味着使用类似于的东西

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

为了收集您将使用的数据：

$.get('/my_view_updates/', success: somefunctiontoparseresponse);
相关文章：