Question

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

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

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

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

问题在于，实际上，当用户将鼠标悬停在我的超链接上时，在浏览器的左下角，他们会看到指向视图的URL，并且显示带有参数的DJango 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，使用jQuery，特别是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
          }
        })
    })
});

这是一个使用超时模拟异步操作的片段

    $(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>

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

1 个答案: