带有 href 和 onclick 以及 AJAX 请求的 HTML 标记 <a>

Posted 2023-03-05

【中文标题】带有 href 和 onclick 以及 AJAX 请求的 HTML 标记 <a>

【英文标题】：HTML Tag <a> with both href and onclick and AJAX Request

【发布时间】：2014-10-01 14:00:20

【问题描述】：

我想让 href 和 onclick 都工作，我在这里找到了解决方案： html tag <a> want to add both href and onclick working

在 myFunction 中，我发出一个调用 perl 组件的 AJAX 请求。

当我将 javascript 调用放在 href 中时它工作正常，但在 onclick 中则不行。不幸的是，我不允许这个解决方案也没有 jQuery，所以请你帮忙。

// AJAX Request doesn't work
<a href="www.mysite.com" onclick="myFunction();">Item</a>

<script type="text/javascript">
    function myFunction () 
        var xmlHttp = getXMLHttpObject();
        xmlHttp.open('GET', 'perl.m', true);                
        return true;
    
</script>

// AJAX Request ok
<a href="javascript: myFunction('www.mysite.com')">Item</a>

<script type="text/javascript">
    function myFunction (url) 
        var xmlHttp = getXMLHttpObject();
        xmlHttp.open('GET', 'perl.m', true);
        window.location.href = goto_url;                
    
</script>

perl.m:
<%init>
    warn "perl.m";
    ... update ...
</%init>

【参考方案1】：

尝试：

<a href="www.mysite.com" onclick="myFunction(event);">Item</a>

<script type="text/javascript">
    function myFunction (e) 
        e.preventDefault();
        var xmlHttp = getXMLHttpObject();
        xmlHttp.open('GET', 'perl.m', true);                
        return true;
    
</script>

因为你有href attr 和url，所以它会转到url 并且你的ajax 不受影响。 e.preventDefault() 是您的解决方案。

【讨论】：

谢谢。我尝试了 e.preventDefault()，AJAX 调用可以使用它。但是 href 中的 URL 不再被调用，尽管函数返回 true。

当然Href中的Url不会访问，因为你调用了Ajax。如果要使用 href attr 访问，请使用 window.location.href = ;

【参考方案2】：

请仔细阅读教程。它声明您必须像这样输入javascript（带有return关键字）。

<a href="www.mysite.com" onclick="return theFunction();">Item</a>

除此之外，您应该始终输入 URL（如 http://***.com）。

如果这支持你，请告诉我。

【讨论】：

谢谢，现在可以了。可以通过单击来调用新站点，但是通过单击上下文菜单中的“新选项卡”，然后无需我的 Ajax 请求。我google了很多，但还没有找到解决方案。如果您能再次提供帮助，那就太好了。

很高兴我的第一个回答对您有所帮助。您介意更详细地解释您的进一步问题吗？通过上下文菜单打开（我假设是 FireFox）有效吗？