jquery mobile ajax sends both GET and POST request

问题:

Here is the problem:

By default jQuery Mobile is using GET requests for all links in the application, so I got this small script to remove it from each link.

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

But I have a pager in which I actually want to use AJAX. The pager link uses HttpPost request for a controller action. So I commented the above jQuery code so that I can actually use AJAX.

The problem is that when I click on the link there are two requests sent out, one is HttpGet - which is the jQuery Mobile AJAX default (which I don't want), and the second one is the HttpPost that I actually want to work. When I have the above jQuery code working, AJAX is turned off completely and it just goes to the URL and reloads the window.

I am using asp.net MVC 3. Thank you

回答1:

Instead of disabling AJAX-linking, you can hijack clicks on the links and decide whether or not to use $.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);
    }
});

The above code expects you to add the ajax-post class to any link you want to use the $.post() method.

On a general note, event.preventDefault() is useful to stop any other handling of an event so you can do what you want with the event. If you use event.preventDefault() you must declare event as an argument for the function it's in.

Also .each() isn't necessary in your code:

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

will work just fine.

You can also turn off AJAX-linking globally by binding to the mobileinit event like this:

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

Source: http://jquerymobile.com/demos/1.0/docs/api/globalconfig.html