от Javascript к Python при щелчке

Question

Я работаю над функцией для тепловой карты. Когда я нажимаю на ячейку на диаграмме, появится всплывающее окно, и я использую модели django и highcharts для реализации.

В настоящее время я застрял с передачей переменной из функции javascript на стороне сервера python. Я знаю, что для django существует метод post и get, но в этом случае у меня нет формы, только клики. Всякий раз, когда я нажимаю на ячейку в тепловой карте, я хотел бы передать строки x-label и y-label на сервер python, обработать и захватить данные на python, а затем передать данные обратно во всплывающее окно. Спасибо !

$(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

Хорошо, так что вы можете сделать, это написать нажмите функции для ячеек тепловых карт.

В функциях onclick вы получите значение этой ячейки, используя «эту» переменную в javascript, так как она сообщает вам, какой контейнер или элемент DOM вы нажали.

Так что теперь $ (этот) .data или любой другой атрибут этого элемента имеет необходимую информацию (которую вы можете проверить в своем браузере на консоли путем проверки элемента) предоставит вам данные, которые вы хотите отправить в свои представления, так что что вы можете манипулировать им.

Так что вы будете называть другую функцию сказать send_data() от этой функции OnClick, и вы будете проходить эту необходимую информацию для этой функции может быть в виде одной или двух переменных или в виде списка, как это:

send_data(info); 

где info - список всех необходимых элементов.

Теперь внутри send_data функции вы будете делать Ajax вызова на URL, соответствующий классу или опр в своих взглядах, на который вы хотите предоставить эту информацию, как это:

function send_data(req_info) { 

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

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

Теперь в ваших URL-адресов .py вы будете ассоциировать def/class в представлениях, соответствующих URL-адресу в вашей функции Ajax. Вы получите эти данные в request.POST, тогда вы сделаете все, что хотите в этом представлении, и, наконец, вернете HTTPResponse (любые данные, которые хотите) вернуться к javascript, который вы получите как ответ в своей успешной функции ,

ПРИМЕЧАНИЕ. - Отправка HTTPRespnse из views.py обратно в запрос Ajax является обязательным, или вы получите сообщение об ошибке, которое не обнаружил HTTPResponse.

Теперь вы можете использовать данные ответа, чтобы снова изменить свои карты тепла.

Надеюсь, это было то, что вы искали.

Answer 2

Самый безопасный способ справиться с этим с помощью 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); 
     } 
    } 
}); 

Что это делает захватить печенье CSRF, что Django обычно хранит на браузере когда кто-то обращается к форме и отправляет ее вместе с запросами AJAX.

Это означает, что вы также нужно что-то вроде этого на странице где-нибудь:

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

На вашей функции зрения, вы хотите csrf_protect декоратора. Вы можете также использовать require_post только принимать данные POST с этой точки зрения:

@require_post 
@csrf_protect 
def my_view(request): 
    pass 

Самый идеальный способ справиться с функциональностью вы ищете, когда вам нужен сюжет, разместить его на вид, как выше, а затем имеют другое представление для получения последних результатов. Это также будет работать лучше, если одновременно с ним могут столкнуться несколько человек.

В JQuery, что будет означать using something like:

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

И собрать данные, которые вы будете использовать:

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