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

时间:2015-12-12 19:47:14

标签: javascript jquery ajax twitter-bootstrap codeigniter

我使用Codeigniter和Bootstrap。

我有一个按钮:

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

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

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

5 个答案:

答案 0 :(得分:2)

尝试以下

$(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 
           });
    });
});

有关详细信息,请参阅 - ajaxpreventDefault

修改

因为有多个链接。您可以使用class选择器。目前,您有2个班级btnbtn-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 
       });
});

答案 1 :(得分:0)

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

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

答案 2 :(得分:0)

您需要使用(function () {}).toString(); "function () {}" (() => {}).toString(); "() => {}" 这是一个只有JavaScript(不是jQuery)的例子

event.preventDefault();

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

答案 3 :(得分:0)

你可以调用一个执行ajax调用的javascript方法。然后就没有重定向了。

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

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

答案 4 :(得分:0)

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

  1. 您点击了触发请求的链接。
  2. 请求将路由到您的控制器。
  3. 控制器处理请求。控制器的结束行类似于$ this-&gt; load-&gt; view(&#39; your-view&#39;);
  4. 在处理完任何视图逻辑后加载原始HTML,并通过普通HTTP将其发送回浏览器。这会发出重定向(如果它是同一页面则刷新)。
  5. AJAX的作用是,它采用步骤4中收到的数据,并通过javascript将其提供给变量。要看到这一点,我们可以编写代码片段:

    <强> 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 DOM的HTML片段,或者以JSON格式返回数据,然后您可以通过javascript处理。