Добавление нескольких параметров в JS-скрипт из HTML

Я хочу передать некоторые данные из моей функции представления Python в JS скрипт, используя HTML. Это моя функция представления

def home(request):
    if request.method == 'POST':
        params = GameOfLifeForm(request.POST)
        if params.is_valid():
            starting_grid = get_starting_grid(params.cleaned_data)
            to_html = {
                'animation': True,
                'gameoflifeform': params,
                'start_grid': starting_grid,
            }
        else:
            to_html = {
                'animation': False,
                'warning_msg': 'Something went wrong. Try once again.'
            }
        return render(request, 'get_animations/home.html', to_html)
    else:
        form = GameOfLifeForm()
        return render(request, 'get_animations/home.html', {'gameoflifeform': form})

Моя форма содержит четыре параметра, один из них называется iterations и именно его я хочу передать JS скрипту. Кроме того, я хотел бы передать start_grid.

Я попытался сделать это следующим образом в своем HTML файле

{{ start_grid | json_script:"start-grid" }}
<script
  type="text/javascript"
  src="{% static 'js/runGameOfLife.js' %}"
></script>

Затем в моем JS скрипте я написал

var startGrid = JSON.parse(document.getElementById("start-grid").textContent);
console.log(startGrid);

Работает отлично, я получил сетку, выведенную в консоль. Аналогично я могу взять iterations из HTML

{{ gameoflifeform.iterations.value | json_script:"iterations"}}
<script
  type="text/javascript"
  src="{% static 'js/runGameOfLife.js' %}"
></script>

Когда я попытался добавить обе переменные в мой JS скрипт, это не сработало.

{{ gameoflifeform.iterations.value | json_script:"iterations"}}
{{ start_grid | json_script:"start-grid" }}
<script
  type="text/javascript"
  src="{% static 'js/runGameOfLife.js' %}"
></script>

Как я могу передать несколько переменных в мой JS скрипт? Как лучше всего это сделать?

Лучше всего использовать некоторую комбинацию ajax и функций представления, если вы изучите этот паттерн, то сможете многого добиться:

views.py

def my_view_function(request):

    ''' this method accepts data from the front end, 
        processes it, and returns a response '''

    # unpack post request:
    first_value = request.POST.get('first_key')

    # do some logic:
    ...

    # pack response
    response = {
        "second_key" : "second_value"
    }

    # return a json response:
    return JsonResponse(response)

scripts.js

function post_request() {

  /* set an event to trigger this method
     this method will then send data to the backend
     and process the response */

  // send an ajax post request:
  $.ajax({
    type : 'POST',
    url : 'the_url',
    data : {
      first_key : 'first_value'
    },
    success : function(response) {
 
      // unpack response
      second_value = response.second_key

      // do some logic
      ...
    }
  });

}

После того как вы поймете это, вы сможете легко передавать данные туда и обратно между фронтендом и бэкендом. Дайте мне знать, если вам нужно больше деталей.

Вернуться на верх