Добавление нескольких параметров в 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
...
}
});
}
После того как вы поймете это, вы сможете легко передавать данные туда и обратно между фронтендом и бэкендом. Дайте мне знать, если вам нужно больше деталей.