传递给 Javascript 的 Django 模板值答案

【问题标题】：Django Template Value Passed to Javascript传递给 Javascript 的 Django 模板值
【发布时间】：2018-08-24 18:58:35
【问题描述】：

我正在开发一款回合制游戏，玩家可以（但不必）获得游戏板上某些空间的所有权。我的详细视图显示了每个玩家拥有的空间，我使用循环来显示所有拥有的空间：

<small class="text-muted">Spaces Owned</small>
  <div class="list-group list-group-flush">
    {% for space in player.space_set.all %}
      <a class="list-group-item" data-toggle="modal" data-target="#spaceModal" id="modalButton">
       {{ space.name }}
      </a>
    {% endfor %}
  </div>

我希望能够使用有关单击哪个空间的所有详细信息填充模式（因此我使用锚标记而不是 div，尽管我想它可能并不重要）。模态看起来像这样，尽管目标是使用适当的 ID 等填充它，使用来自 AJAX 调用的响应而不是当前用作占位符的模板变量：

<div class="modal fade" id="spaceModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-body">
        <div class="wrapper">
          <div class="box">
            <h2>{{ space.name }}</h2>
            <div class="float-left">{{ space.location }}</div>
            <div class="float-right">{{ space.defense_points }}</div>
            <br />
            <div class="float-right">{{ space.attack_points }}</div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

我想要做的是使用 AJAX 调用来填充每个空间的模式，因为它被点击。我的服务器端函数设置好了，当我处理一个简单的 get 请求时它正确返回了所需的 JSON（我正在使用以下 url 模式）：

from django.urls import path
urlpatterns = [
    path('<int:game>/space_data/<int:space>', get_space_data, name = 'get_space_data'),
]

我的views.py定义为：

def get_space_data(request,game,space):
    game = Game.objects.get(pk=game)
    space = game.space_set.get(location=space)
    data = {
        'name': space.name,
        'location': space.location,
        'defense_points': space.defense,
        'attack_points': space.attack,
    }
    return JsonResponse(data)

现在我用来测试使用的 JS 如下：

<script>
  $("#modalButton").click(function(){
    var space = "{{ space }}"
    console.log(space)
    alert('Modal Button Clicked')
  })
</script>

总结

基本上我想要做的，但我不知道该怎么做，就是将空间变量传递给 JS 代码，以便我可以在最后一个脚本代码中构建适当的 AJAX 调用。

【问题讨论】：

不清楚你在问什么。您目前没有进行 AJAX 调用。当你这样做时，它将能够从 Django 视图中以 JSON 格式访问响应。

标签： javascript jquery ajax django django-templates

【解决方案1】：

谈到 Daniel 所写的内容，我所问的只是如何将 Django 模板数据传递给 JQuery 脚本，然后我将在 AJAX 调用中使用该脚本。不过，我想通了，并将在此处发布我的答案，而不仅仅是删除问题。

模态弹出锚标记应如下所示：

<small class="text-muted">Spaces Owned</small>
  <div class="list-group list-group-flush">
    {% for space in player.space_set.all %}
      <a class="list-group-item" data-toggle="modal" data-target="#spaceModal" id="modalButton" data-location="{{ space.location }}">
       {{ space.name }}
      </a>
    {% endfor %}
  </div>

得到的JQuery代码如下：

<script>
  $("#modalButton").click(function(){
    console.log($(this).data('location'))
    alert('Modal Button Clicked')
  })
</script>

由此我将能够向脚本添加一个实际的 AJAX 调用，并根据需要提取数据。

【讨论】：

【解决方案2】：

通过这种方式你将变量发送到js以在ajax中使用它们

{% block scripts %}
    <script>
     var name  = {{space.name}}
     var location = {{space.location}}
    </script>
   <!-- JS Template -->
   <script src="{% static 'folder/name.js' %}"></script>

{% endblock scripts %}

还有你的 js

$.ajax({

       url: url,
       method: "",
       data: {

         "name" : name,
         "location":location

       },
       success: function (_response) {


       },
)

【讨论】：