Передать динамическую переменную Javascript в Django/Python

Я просмотрел ряд ответов и других веб-сайтов, но никто не ответил на мой конкретный вопрос. У меня есть веб-страница с кнопками "+" и" -", которые должны увеличивать переменную под названием "pieFact". Эта переменная должна обновляться динамически без необходимости обновления страницы. Затем он должен передаваться в мое представление Django при каждом изменении значения. Это будет использоваться для обновления размера круговых диаграмм на веб-карте. У меня есть следующее:

<button type="button" id=bttnMinus onclick="pieFact=pieFact*0.9">-</button>
<button type="button" id=bttnPlus onclick="pieFact=pieFact*1.1">+</button></td> 
<script type="text.javascript">
    var pieFact=0;
</script>

Как я могу передать значение "пирофакт" Джанго? Основываясь на моих ограниченных знаниях, я думаю, что мне, возможно, придется использовать AJAX post/get.

7
ajax django javascript jquery python

1 ответов

чтобы не обновлять страницу, да, вам понадобится AJAX. Я обычно не люблю предлагать библиотеки слишком много в ответах, однако, в интересах легкой кросс-браузерной совместимости, я бы предложил использовать jQuery.

С jQuery это было бы так же просто, как

внутри вашего шаблона django

<html>
    ...
    <head>
        <script>
            var URL = "{% url 'my_view_that_updates_pieFact' %}";
        </script>
    </head>
...

позже...

вам нужно либо опубликовать, либо получить данные на сервер через AJAX. К будьте более спокойны, когда мне нужно отправить данные на сервер, я использую POST. библиотека jQuery предоставляет $.post () функция удобства для данных AJAX по url-адресу через POST. Тремя параметрами являются URL-адрес, данные для отправки (как объект JavaScript; подумайте о словарях python, если вы не слишком знакомы с JavaScript) и функция обратного вызова, как только сервер отправляет ответ.

<script>
function updatePieFact(){
    var data = {'pieFact': pieFact};
    $.post(URL, data, function(response){
        if(response === 'success'){ alert('Yay!'); }
        else{ alert('Error! :('); }
    });
}

на .click() функции в основном то же самое, что и указание onlick в html атрибут. Оба нажмите события update pieFact как и следовало ожидать, а затем позвоните updatePieFact() отправить значение pieFact на сервер.

$(document).ready(function(){
    $('#bttnMinus').click(function(){
        pieFact *= 0.9;
        updatePieFact();
    });
    $('#bttnPlus').click(function(){
        pieFact *= 1.1;
        updatePieFact();
    });
});
</script>

In views.py

так как я использовал $.post() функция в JavaScript, запрос, который Django собирается получить, будет иметь метод "POST", поэтому я проверяю, чтобы убедиться, что метод действительно POST (это означает, что если кто-то посещает URL для этого представления с чем-то вроде запроса GET, они не будут все обновления). Как только я вижу, что запрос на самом деле POST, Я проверяю, чтобы увидеть, если ключ 'pieFact' в дикт request.POST.

помните, когда я установил переменную data в javascript для {'pieFact': pieFact}? Этот javascript просто становится запросом.Опубликовать словарь python. Итак, если в javascript я вместо этого использовал var data = {'hello': pieFact};, тогда я буду проверять if 'hello' in request.POST вместо. Как только я это увижу!--6--> в запросе.POST dictionary, я могу получить его значение, а затем что-то сделать с ним. Если все успешно, я возвращаю HttpResponse в строке 'success'. Это коррелирует с проверкой в javascript:if(response === 'success').

def my_view_that_updates_pieFact(request):
    if request.method == 'POST':
        if 'pieFact' in request.POST:
            pieFact = request.POST['pieFact']
            # doSomething with pieFact here...
            return HttpResponse('success') # if everything is OK
    # nothing went well
    return HttpRepsonse('FAIL!!!!!')

надеюсь, это поможет вам в правильном направлении.

14