如何创建一个按钮，在单击时将 HTTP GET 请求发送到安全 URL?

Question

我正在构建一个 Web 应用程序，用户在其中搜索摄像机(位于具有 dyndns 域的远程网络上)，并显示一个按钮以触发摄像机上的警报器。当用户单击按钮时，他们不应看到页面刷新或发生任何事情(除了按钮可能被禁用)。该按钮正在向网站发送 HTTP GET 请求：

example.com:port/file.xml?relay2State=2.

但是，我不确定如何处理用户刷新或点击后退按钮，以及浏览器如何将请求存储在其历史记录中。我不希望用户能够按后退按钮并再次激活此请求，或刷新页面并激活它。用户也不应该能够将按钮请求另存为书签。从本质上讲，此事件应该只能在单击按钮时触发，并且该按钮应在整个网站上禁用 30 秒(所有用户都应看到按钮被禁用)。

这就引出了一个问题：这应该是一个 GET 还是 POST 请求，我如何通过按钮合并它？

以下是相关代码：

<!-- siren_search.html -->
{% if cameras %}
<button id="trigger-all-btn" type="button" class="btn btn-outline-danger">Trigger all sirens</button>
<table id="camera-table" class="table table-hover">
<thead>
<tr class="header">
<th scope="col" style="width:33%;">Asset Name</th>
<th scope="col" style="width:33%;">Job Site</th>
<th scope="col" style="width:33%;"></th>
</tr>
</thead>
<tbody>
{% for camera in cameras %}
<tr>
<td>{{ camera.asset_name }}</td>
<td>{{ camera.site.name }}</td>
<td><button id="{{ camera.asset_name }}-btn" type="button" class="btn siren-btn btn-outline-danger">Siren</button></td>
</tr>
{% endfor %}
</tbody>
</table>
{% endif %}

# views.py
def siren_search(request):
context = {}
if request.method == 'GET':
term = request.GET.get('query')
if term:
try:
jobsite = JobSite.objects.get(name__iexact = term)
cameras = jobsite.camerasystem_set.all()
context = {
'cameras': cameras,
'numberOfCameras': len(cameras)
}
except ObjectDoesNotExist:
pass
## Add functionality to handle button click and make the following request
pulseSiren = requests.get(f'{camera.name}.example.com:port/file.xml?relay2State=2', auth=('user', 'pass'))
return render(request, 'siren_search.html', context)

Answer 1

你问的不是一个简单的解决方案，你实际上有两个问题：

1) 如何在不更改浏览器的情况下触发 URL？

答：异步执行。这需要Javascript，你可能会找到一个像JQuery这样的库来简化这个解决方案的创建。例如，考虑JQuery的$.get 使用GET或POST对解决方案无关紧要。

2)您如何与任何其他浏览器通信并在单击一个按钮时禁用其按钮？

答：这并不简单。浏览器到服务器的通信由浏览器拉取，而不是由服务器推送。一种选择是使用异步 Javascript 轮询服务器，以便服务器提供有关按钮状态的更新。但是，您必须处理在浏览器上单击按钮后在另一个浏览器上单击的情况，但在第二次单击浏览器在其最新轮询中获取更新的按钮状态信息之前。

希望这个答案能提供一些有用的信息。