从HTML向JS脚本添加多个参数

Question

我想将一些数据从我的Python视图函数传递到使用HTML的JS脚本。这是我的视图函数

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

工作得很完美，我在控制台上打印出了网格。类似地，我可以从HTML

中抓取iterations

{{ 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脚本?做这件事的最好方法是什么?

Answer 1

最好结合使用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
...
}
});
}

一旦你理解了这一点，你将能够在前端和后端之间无缝地来回传递数据。如果你需要更多的细节，请告诉我。