当我单击 Django 模板页面上的超链接时调用单独的事件

Question

我的 Django 模板上有一个用于实现两个功能的广告的标签：

1. 当用户单击它时，会记录有关单击的数据（其在页面上的位置、链接的文本等）
2. 然后将其重定向到不同网站上的外部链接。

页面模板的加载方式是在我的views.py中用指向视图函数的href属性动态填充标签：

<a href="url arg1&arg2&redirect_url" target="_blank"> 
    <span dir="ltr">Lawyer Education</span>
</a>

问题在于，实际上，当用户将鼠标悬停在我的超链接上时，在浏览器的左下方，他们会看到指向视图的 URL，并且显示的是带有参数的 DJango url，而不是他们期望的 URL被重定向到。

是否可以以某种方式显示重定向 URL？还是在重定向同时发生时将视图函数作为事件触发？

Javascript/jQuery/PHP 不是我的强项，所以如果这是解决我的问题的方法，我不确定如何继续...

Answer 1

是的，可以使用Ajax。

编写一个指向用户将被重定向到的地址的普通链接：这样悬停将在状态栏中显示预期的地址。

然后在 JavaScript 中：

• 拦截点击链接
• 通过 AJAX 调用执行日志记录操作
• 信息保存到服务器后，重定向用户

HTML

<a href="https://example.com/" class="intercept">go to example.com</a>

如果您需要在每个链接上附加特定的信息，您可以使用自定义data- attributes，您将通过 JavaScript 使用它（使用 jQuery 的.data() 方法）。这些信息必须写入后端并按原样输出到浏览器。例如：

<a href="https://example.com/" data-arg1="important information" data-arg2="good to know" class="intercept">go to example.com</a>

JavaScript，带有 jQ​​uery，特别是 jQuery 的 .ajax() 方法

$(document).ready(function() {

    // This is the click event handler, selecting only the links that have the "intercept" class
    $('a.intercept').on('click', function(event) {

        event.preventDefault(); // prevent the normal action for the browser, which is to follow the link

        var redirectUrl = $(this).attr('href'); // keep track of the URL you need to go to

        // This is where you prepare your query to send to the backend, by retrieving the data attribute values
        var arg1 = $(this).data('arg1'); // 'important information'
        var arg2 = $(this).data('arg2'); // 'good to know'

        // call your backend script
        $.ajax({
          url: 'http://yourwebsite.com/your-tracking-script',
          data: {
              url: redirectUrl,
              param1: arg1,
              param2: arg2
          },
          complete: function() {
              // When the server sends response that operation is done, send user on his/her way  
              window.location.href = redirectUrl; // Redirection
          }
        })
    })
});

这是一个模拟超时异步操作的sn-p

    $(document).ready(function() {
        $('a.intercept').on('click', function(event) {
            event.preventDefault();
            var redirectUrl = $(this).attr('href');
            setTimeout(function() {
            window.location.href = redirectUrl;
            }, 2000)
        })
    });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<a href="https://example.com/" class="intercept">go to example.com</a>