Question

我遇到一个链接，该链接将数据发送到后端控制器，如下所示：
http://url/backend/index.php?controller=someController&update=2&name="Test" 该控制器对传输的数据执行一些操作，并返回HTML视图。但是，我有一个特殊的用例，我想触发数据处理而无需遵循重定向到发送的HTML响应。
有没有一种方法可以运行请求并触发控制器以处理数据并停留在同一页面上/不“关注”链接？我曾考虑过使用event.preventDefault()，但不确定是否还会使控制器处理请求。

Answer 1

您可以调用event.preventDefault（）并通过事件监听器中的AJAX（XMLHttpRequest）发出请求。

Answer 2

听起来您想对click事件发出AJAX请求，并摆脱链接本身上的href属性。

因此，如果这是您的原始代码：

<a href="http://url/backend/index.php?controller=someController&update=2&name=Test">Test Link</a>

您想要做这样的事情：

<a onclick="sendRequest">Test Link</a>

<script>

function sendRequest(){

    var xhr = new XMLHttpRequest();

    xhr.open('GET', 'http://url/backend/index.php?controller=someController&update=2&name=Test');

    xhr.send();

}

</script>

Answer 3

Kinda继续@ sadq3377所说的话...但是让我们以一种不引人注目的方式来做...

<a id="some-link" href="http://url/backend/index.php?controller=someController&update=2&name='Test'"">Some link</a>

然后您可以执行以下JavaScript

document.getElementById('some-link').addEventListener('click', function(ev){
    ev.preventDefault();
    // DO SOMETHING WITH THE HREF like use it for the ajax call
    var ajaxCall = new XMLHttpRequest();
    ajaxCall.open('GET', this.href);
    ajaxCall.send();    
});

因此，至少您的代码中没有任何硬编码的项目...

如@ItFreak要求的那样，使其更具扩展性。

window.addEventListener('click', function(ev){
    if( ev.target.getAttribute('data-ajax-link') !== null ){
        ev.preventDefault();
        // DO THE REST OF THE CODE FROM THE PREVIOUS EXAMPLE
    }
});

这意味着您要执行该功能的所有链接都必须看起来像这样...

<a id="some-link" data-ajax-link href="http://url/backend/index.php?controller=someController&update=2&name='Test'"">Some link</a>

任何具有“ data-ajax-link”属性的链接都将通过此if语句并使用此逻辑，所有其他链接都将像正常情况一样...

Answer 4

在这种情况下，您可以尝试在另一个标签中打开链接。这样，您的原始页面将保持不变。

window.open(url,'_blank');

HTML锚发送请求，但不遵循链接

4 个答案: