javascript - Ajax not working with Href (solution) - Stack Overflow

admin管理员组

文章数量:1277525

I was having many problems trying to find the reason of why my ajax function was not working on Safari, Chrome and sometimes Firefox, but worked very well on IE. I made a little change, and everything start working perfect (in every browser), but I still dont know why, and I want to find out the main reason of this.

I had an Ajax function respuestas() which insert some data on a database. This function is called by some links like this: <a onclick="respuestas()" href="link.html">LINk </a>. So when I click on the link, the function takes the proper information and inserts it on the database and then go to link.html. Again, this only worked for IE.

I insert an alert(xml.responseText) to see the response that i was having. Safari, fireforx and chrome returns an empty alert.

I was tired of changing pages everytime I wanted to test my function, so I add a button calling my function (without going to another webpage) and IT WORKED!. Now, I have something like this: <a onclick="respuestas()" href="#">LINK </a> and put window.location.href="link.html" inside my ajax function, so the change of pages occur after the ajax response is pleted, and it is working very well.

But I do not entirely understand why this works and the other way does not.

I was having many problems trying to find the reason of why my ajax function was not working on Safari, Chrome and sometimes Firefox, but worked very well on IE. I made a little change, and everything start working perfect (in every browser), but I still dont know why, and I want to find out the main reason of this.

I had an Ajax function respuestas() which insert some data on a database. This function is called by some links like this: <a onclick="respuestas()" href="link.html">LINk </a>. So when I click on the link, the function takes the proper information and inserts it on the database and then go to link.html. Again, this only worked for IE.

I insert an alert(xml.responseText) to see the response that i was having. Safari, fireforx and chrome returns an empty alert.

I was tired of changing pages everytime I wanted to test my function, so I add a button calling my function (without going to another webpage) and IT WORKED!. Now, I have something like this: <a onclick="respuestas()" href="#">LINK </a> and put window.location.href="link.html" inside my ajax function, so the change of pages occur after the ajax response is pleted, and it is working very well.

But I do not entirely understand why this works and the other way does not.

• javascript
• html
• ajax

Share Improve this question Follow asked Feb 22, 2012 at 16:52 mauguerramauguerra 3,85855 gold badges3333 silver badges3737 bronze badges

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 8

This because the link element has also it's default listener. So, to prevent any extra action on click, you should prevent default action. The simple way to do this is to return false on click.

<a onclick="respuestas(this); return false;" href="link.html">LINk</a>

And your respuestas in easiest way should be like this:

function respuestas(link) {

   /* do what you need here */

   window.location.href = link.href;
}

This is pretty primitive, but I believe you'll get the idea.

What's happening here is that your browser was navigating to the next page before repusetas() was able to execute. In order to ensure that your script is going to fire before the browser follows the link, you need to take control of the click event. In jQuery it works like this:

$('a').bind( 'click', function( event ){
    event.preventDefault();
    repuestas();
    var href = $(this).attr('href');
    window.location.href = href;
});

Try this Jquery code

function respuestas()
{
$.ajax({
        type: "post",
        url: "insert.php?data="+data,

        success  : function(data){
             window.location.href="link.html";
        },
        error    : function(){
             alert("Could not ");
        }

         });

}

本文标签： javascriptAjax not working with Href (solution)Stack Overflow