单击按钮时如何禁用重定向？

Question

我使用 Codeigniter 和 Bootstrap。

我有一个按钮：

<a class="btn btn-success" id="btnid" href="http://site/controllerName/parameter">Text</a>

如果我点击按钮，它会调用带有一个参数的控制器，然后控制器会重定向到一个站点。

我的问题是有没有办法用参数调用控制器但跳过重定向？

Answer 1

尝试关注

$(document).ready(function(){ // Add your event handlers inside ready block
    $("#btnid").click(function(event) { // button event handler
          event.preventDefault(); // prevent page from redirecting
          $.ajax($(this).attr('href')).done(function(response) { // send call
             // after call 
           });
    });
});

详情参考-ajax,preventDefault

编辑

因为链接不止一个。您可以使用class 选择器。目前，您有 2 个课程 btn 和 btn-success。你可以使用它们中的任何一个，但是，我建议你再添加一个类让我们说btn-api

然后将您的点击选择器更新为

$(".btn-api").click(function(event)) {
      event.preventDefault(); // prevent page from redirecting
      $.ajax($(this).attr('href')).done(function(response) { // send call
         // after call 
       });
});

Answer 2

https://api.jquery.com/event.preventdefault/ - 阻止默认操作

$( "a" ).click(function( event ) {
  event.preventDefault();
}

Answer 3

您需要使用event.preventDefault(); 这是一个仅使用 JavaScript（不是 jQuery）的示例

<script>
    function stopDefAction(evt) {
        evt.preventDefault();
    }

    document.getElementById('btnid').addEventListener(
        'click', stopDefAction, false
    );
</script>

您可以在此处找到文档和完整示例： https://developer.mozilla.org/en-US/docs/Web/API/Event/preventDefault

Answer 4

您可以调用执行 ajax 调用的 javascript 方法。那么就不会有重定向了。

<a class="btn btn-success" id="btnid" onclick="javascript:theFunction();" href="#">Text</a>

<script type="text/javascript">
    function theFunction () {
         event.preventDefault();
         // add your ajax call to the controller here e.g 
         $.ajax({
            url: "http://site/controllerName/parameter"
            }).done(function() {
                // action when the controller call returns 
            });
        }
</script>

Answer 5

默认情况下，单击指向控制器的链接将呈现此控制器的视图或重定向到另一个视图。要停止重定向，您必须通过 AJAX 调用控制器。为了充分理解这一点，让我们看看不使用 ajax 时会发生什么：

1. 您点击触发请求的链接。
2. 请求被路由到您的控制器。
3. 控制器处理请求。控制器的最后一行类似于 $this->load->view('your-view');
4. 这会在处理完任何视图逻辑后加载原始 HTML，并通过普通 HTTP 将其发送回您的浏览器。这会发出重定向（如果是同一页面，则发出刷新）。

AJAX 的作用是获取第 4 步中接收到的数据，并通过 javascript 在变量中提供。看到这个，我们可以写一段代码sn -p：

HTML

<a onclick="getAjaxData()" class="btn btn-success" id="btnid">Text</a>

使用 ajax 最简单的方法是通过 JQuery。 Javascript

    function getAjaxData(e) {
        // Make sure that the link default action doesnt occur.
        e.preventDefault();
        $.ajax({
            type: 'GET', // depending on the controller method.
            url: 'http://site/controllerName/parameter',
            success: function(data)
            {
                // The variable data contains the data returned from the controller.
            },
            error: function()
            {
                alert('Something went wrong!');
            }
        });

现在，如果您保持原样，变量 data 将包含从控制器返回的原始 HTML。通常，如果您将使用 AJAX，最好返回 HTML sn-ps，您可以直接附加到当前的 HTML DOM，或者返回 JSON 格式的数据，然后您可以通过 javascript 处理。