HTML 标记 <a> 包含 href 和 onclick 以及 AJAX 请求

HTML Tag <a> with both href and onclick and AJAX Request

本文关键字：onclick 以及 AJAX 请求 href 标记 HTML 包含      更新时间：2023-09-26

我想让 href 和 onclick 同时工作，我在这里找到了一个解决方案：HTML 标记 想要同时添加 href 和点击工作

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

当我将 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>

请仔细按照教程进行操作。它指出您必须像这样输入javascript(带有return关键字(。

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

除此之外，您应该始终输入一个URL(如 http://stackoverflow.com(。

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

尝试：

<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 url 的 attr，所以它会转到 url，你的 ajax 不受影响。 e.preventDefault()是您在这里的解决方案。

相关文章：