Question

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

<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调用。

Answer 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调用并根据需要提取数据。

Answer 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) {


       },
)

Django模板值传递给Javascript

2 个答案: