Как заставить мой jQuery не выполнять <a href> до тех пор, пока не завершится успешная публикация ajax?

Question

Я пытаюсь обновить базу данных и отправить браузер пользователей на другую страницу одним щелчком мыши.

HTML выглядит так:

<a id='updateLiveProgress' style='width:118px;' href='~link~'>Click here</a>

Javascript выглядит так:

        $("#updateLiveProgress").live("click", function(e){

            var ajaxlink = "~ajaxlink~"
            $.post(ajaxlink, function(data, e){
                return true;
            });

        });

Когда пользователь щелкает ссылку, он должен обновлять базу данных через ссылку ajax, и тогда возвращаемая страница будет зависеть от обновлений базы данных ajax. Проблема в том, что кажется, что страница загружается до того, как ajax завершит обновление базы данных. Я пытаюсь передать событие click через ajax, используя e, чтобы предотвратить выполнение ссылки до тех пор, пока не завершится вызов ajax, но, похоже, он не работает.

Есть ли лучший способ для меня это сделать?

Answer 1

Попробуйте сделать это:

    $("#updateLiveProgress").live("click", function(e){
        e.preventDefault();
        var href = this.href;
        var ajaxlink = "~ajaxlink~"
        $.post(ajaxlink, function(data, e){
            window.location = href;
        });
        return false;
    });

Начиная с jQuery 1.7, сделайте это (используя .on вместо из .live):

    $("#updateLiveProgress").on("click", function(e){
        e.preventDefault();
        var href = this.href;
        var ajaxlink = "~ajaxlink~"
        $.post(ajaxlink, function(data, e){
            window.location = href;
        });
        return false;
    });

Answer 2

В зависимости от того, как вы настроили AJAX, вы, скорее всего, будете использовать обратный вызов. В этом случае обратный вызов является тем, где указан успех function. Вот пример кода:

//assuming button is an anchor link
$('#button').click(function(){ 
    //do ajax request
    $.ajax{
        url: 'http://someurl.com/getuser?id=69',
        success: function(data, status){
            //assuming page to load is in data, redirect
            window.location = "http://mysite.com/newuser.aspx";
        }
    }

    //import to stop the anchor link request
    return false;

});

Answer 3

2 способа сделать это

Первый

$("#updateLiveProgress").live("click", function(e){

        var ajaxlink = "~ajaxlink~"
        $.post(ajaxlink, function(data, e){
            return true;
        });
        return false;
    });

Второй

$.ajax({
   type: 'POST',
   url: "~ajaxlink~",
   data: data,
   async: false
});

Answer 4

Это внутреннее поведение Ajax, фактически то, что означает A: асинхронный. Вызов ajax запускается, и функция click возвращается до возвращения запроса ajax. У вас есть 2 варианта:

1. Сделать вызов ajax синхронным. Я бы не рекомендовал это.

2. Вручную перейдите по ссылке, когда вернется вызов ajax:

   $("#updateLiveProgress").live("click", function(e){
   
       var ajaxlink = "~ajaxlink~"
       $.post(ajaxlink, function(data, e){
           window.location.href = ajaxlink; // or something similar
       });
   
       return false; // this keeps the link from being followed
   });