JQuery мобильный 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