How to disable redirecting when clicking on a button?

问题

I use Codeigniter and Bootstrap.

I have a button:

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

If I click to the button its call a controller with one parameter then the controller redirects to a site.

My question is that is there a way to call the controller with a parameter but skipping the redirection?

回答1:

Try following

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

For details refer to - ajax, preventDefault

Edit

As there are more than one link. You can use class selector. Currently, you have 2 classes btn and btn-success. You can use either of them, however, I will suggest you to add one more class let us say btn-api

Then update your click selector to

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

回答2:

https://api.jquery.com/event.preventdefault/ - prevents the default action

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

回答3:

You need to use event.preventDefault(); This is an exemple with just JavaScript (Not jQuery)

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

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

You can find documentation and complete exemple here: https://developer.mozilla.org/en-US/docs/Web/API/Event/preventDefault

回答4:

You can call a javascript method which does a ajax call. Then there will be no redirect.

<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>

回答5:

By default a click on the a link to a controller will either render this controller's view or redirect to another view. To stop redirecting, you must call the controller via AJAX. To fully understand this, lets see what happens when you don't use ajax:

You click on the link which triggers the request.
The request is routed to your controller.
The controller processes the request. The ending line of the controller is something like $this->load->view('your-view');
This loads the raw HTML after any view logic has been processed and sends it back to your browser via normal HTTP. This issues a redirect (or a refresh if it was the same page).

What AJAX does, is that it takes the data received in step 4, and makes it available in a variable via javascript. To see this, we can write a code snippet:

HTML

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

The easiest way to use ajax is via 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!');
            }
        });

Now if you leave things as they are, the vairable data will contain the raw HTML returned from the controller. Usually if you will use AJAX, it is better to either return HTML snippets which you can append directly to your current HTML DOM, or return data in JSON format, which you can then process via javascript.

来源：https://stackoverflow.com/questions/34244195/how-to-disable-redirecting-when-clicking-on-a-button

标签

javascript

jquery

ajax

twitter-bootstrap

codeigniter