Django/HTML：通过单击按钮发送信息？答案

【问题标题】：Django/HTML: Send information through a button click?Django/HTML：通过单击按钮发送信息？
【发布时间】：2017-10-31 08:56:14
【问题描述】：

在我的页面上，我弹出了一个要求购买确认的模式。此模式可以通过与我的“商店”中的每个项目对应的 10 个不同的按钮按下来触发。如果可能的话，我想让商品的价格{{ item.price }} 在模态窗口中可见。我将如何在按下按钮的同时发送此信息？我必须定义 10 种不同的模态吗？

<!DOCTYPE html>

{% extends 'base.html' %}

{% load staticfiles %}

{% block content %}
<div class="row centre-v">
  <div class="card shop-card">
    <div class="card-block shop-clock">
      <h3><span class="shop-tag">Shop</span></h3>
      {% if items %}
      {% for item in items %}
      <div class="alert alert-shop" role="alert">
        <span class="shop-title">{{ item.perk }}</span>
        <span class="shop-cost"><button type="button" class="btn btn-primary btn-shop" data-toggle="modal" data-target="#shopModal">Buy:&nbsp;{{ item.price }}<img class="coin-img shop-coin" src="{% static 'assets/coin.png' %}" height="20px" width="auto"></button></span>
        <div style="clear: right;"></div>
      </div>
      {% endfor %}
      {% endif %}
        </div>
    </div>
</div>

<div class="modal fade" id="shopModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="exampleModalLabel">Purchase confirmation:</h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body">
        This will cost you {{ item.price }}
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary">Save changes</button>
      </div>
    </div>
  </div>
</div>
{% endblock %}

【问题讨论】：

标签： javascript html css django twitter-bootstrap

【解决方案1】：

在我看来，您已经在模板中获得了所需的所有信息，无需重新加载页面或使用 AJAX。我会覆盖按钮中的 onclick 事件。新功能将接收您想要在模式中显示的所有信息。

假设你有你的按钮：

<button onclick="showMyModal({{ item.price }})">Buy</button>

然后需要创建js函数：

function showMyModal(itemPrice){
    /* populate the element with the price */
    document.getElementById("modal-price-element").innerHTML = itemPrice;
    /* Show the modal */

}

您可能希望通过该函数发送更多信息并向模态添加更多数据。如果您熟悉 JQuery，也可以使用它。

【讨论】：

【解决方案2】：

可以在一个 while 循环中创建 10 种不同的模式，但这是不好的做法。正确的解决方案是使用 JavaScript 对服务器进行 AJAX 调用。

您需要编写一个 JavaScript 脚本，该脚本将使用项目的 id 对服务器进行 AJAX 调用。在 Django 中，您需要编写一个视图，该视图将使用 JSON 返回价格（和其他信息）。

如果您需要做很多这样的事情，我建议您查看 Django REST 框架。

【讨论】：

【解决方案3】：

就我而言，正确的解决方案是创建一个模态标记。并在单击按钮时显示通过 AJAX 调用服务器加载信息。

【讨论】：