Question

我最近在通过Django框架构建的移动Web应用程序中添加了一个基于HTML的share on whatsapp按钮：

<a rel="nofollow" target="_blank" href="whatsapp://send?text=https://example.com" data-link="whatsapp://send?text=https://example.com" data-action="share/whatsapp/share">
<button><img src="whatsapp.svg">Share</span></button>
</a>

现在，我想跟踪此分享按钮上的所有点击次数。作为服务器端开发人员，一种显而易见的方法是POST到视图，记录单击，然后从那里重定向。具体来说，在模板中：

<form method="POST" action="{% url 'whatsapp_share' %}">
{% csrf_token %}
<button><img src="whatsapp.svg">Share</span></button>
</form>

在视图中：

def whatsapp_share(request):
    if request.method == 'POST':
        clicker_id = request.user.id
        # log the click and clicker_id, preferably asynchronously
        return redirect("whatsapp://send?text=https://example.com")

这看起来很简单。但请仔细查看顶部原始代码段中的<a>标记。它还包含data-link和data-action属性。

如何在重定向中包含这些data-*属性？

其次，我觉得使用上述基于视图的方法的一个缺点是服务器往返。 Ergo，在纯HTML的情况下，客户端负责所有事情，但是，在涉及Django视图时，必须首先调用服务器（增加延迟）。

是否有其他方法可以使客户端不必等待点击记录？如果是这样，一个简单，快速的说明性示例让我开始将是一个伟大的。

Answer 1

我建议你保留链接原样。你不需要表格。

最简单的解决方案是对whatsapp_share网址进行ajax调用。并且ypu甚至不需要POST请求，因为您没有发送任何数据

将onclick事件添加到元素：<a onclick="logWhatsappClick()">>，然后：

function logWhatsAppClick() {
    $.ajax({
      url: your-application.com/log_whatsapp_share,
      method: 'GET',
      success: function(data){
           console.log('Sent log request')
     },
     error: function() {
           console.log('Error') 
     }
     });
}

因此，当用户点击您的按钮时 - 应用程序在后台发送日志请求，而不是等待它完成。在你的django视图代码中不返回重定向，只是HTTP 200 OK。

请注意，当有人从其他地方而不是从您的网站发送这些请求时，对此案件没有任何保护。它很容易实现，但我认为这对于这个小功能来说并不是很重要。

处理额外的属性和日志记录 - 从Django app重定向到外部URI时

1 个答案: