JQuery Mobile AJAX отправляет запросы GET и POST

Question

Вот проблема:

По умолчанию jQuery Mobile использует GET-запросы для всех ссылок в приложении, поэтому я получил этот небольшой скрипт для удаления его из каждой ссылки.

$('a').each(function () {
   $(this).attr("data-ajax", "false");
});

Но у меня есть пейджер, в котором я действительно хочу использовать AJAX.Пейджинговая ссылка использует HttpPost запрос для действия контроллера.Поэтому я прокомментировал приведенный выше код jQuery, чтобы я мог использовать AJAX.

Проблема в том, что когда я нажимаю на ссылку, отправляются два запроса, один - HttpGet - это JQuery Mobile AJAXпо умолчанию (чего я не хочу), а второй - HttpPost, с которым я действительно хочу работать.Когда у меня работает вышеуказанный код jQuery, AJAX полностью отключается, он просто переходит на URL и перезагружает окно.

Я использую asp.net MVC 3. Спасибо

Answer 1

Вместо того, чтобы отключить AJAX-связывание, вы можете перехватывать щелчки по ссылкам и решать, использовать или нет $.post():

$(document).delegate('a', 'click', function (event) {

    //prevent the default click behavior from occuring
    event.preventDefault();

    //cache this link and it's href attribute
    var $this = $(this),
        href  = $this.attr('href');

    //check to see if this link has the `ajax-post` class
    if ($this.hasClass('ajax-post')) {

        //split the href attribute by the question mark to get just the query string, then iterate over all the key => value pairs and add them to an object to be added to the `$.post` request
        var data = {};
        if (href.indexOf('?') > -1) {
            var tmp  = href.split('?')[1].split('&'),
                itmp = [];
            for (var i = 0, len = tmp.length; i < len; i++) {
                itmp = tmp[i].split('=');
                data.[itmp[0]] = itmp[1]; 
            }
        }

        //send POST request and show loading message
        $.mobile.showPageLoadingMsg();
        $.post(href, data, function (serverResponse) {

            //append the server response to the `body` element (assuming your server-side script is outputting the proper HTML to append to the `body` element)
            $('body').append(serverResponse);

            //now change to the newly added page and remove the loading message
            $.mobile.changePage($('#page-id'));

            $.mobile.hidePageLoadingMsg();
        });
    } else {
        $.mobile.changePage(href);
    }
});

В приведенном выше коде ожидается, что вы добавите класс ajax-post к любой ссылке, которую хотите использовать $.post().

В общем, event.preventDefault() полезно, чтобы остановить любую другую обработку события, чтобы вы могли делать с событием то, что вы хотите. Если вы используете event.preventDefault(), вы должны объявить event в качестве аргумента для функции, в которой он находится.

Также .each() не требуется в вашем коде:

$('a').attr("data-ajax", "false");

будет работать просто отлично.

Вы также можете отключить AJAX-связывание глобально, связавшись с событием mobileinit следующим образом:

$(document).bind("mobileinit", function(){
    $.mobile.ajaxEnabled = false;
});

Источник: http://jquerymobile.com/demos/1.0/docs/api/globalconfig.html