jQuery Mobile的AJAX发送GET和POST请求 [英] jquery mobile ajax sends both GET and POST requests

问题描述

下面的问题：

在默认情况下jQuery Mobile的使用在应用程序的所有环节GET请求，所以我得到了这个小脚本从每一个环节中删除。

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");
});

不过，我有一个寻呼机在其中其实我是想使用AJAX。寻呼机链路使用 HttpPost 要求的控制器操作。所以我评论上面jQuery的code，这样我可以实际使用AJAX。

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.

现在的问题是，当我点击链接有送出两个请求，一个是 HTTPGET - 这是jQuery Mobile的默认AJAX（我不希望），而第二个是 HttpPost ，我真正想要的工作。当我有上面的jQuery code工作，AJAX完全关闭，它只是去到URL并重新加载窗口。

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.

我使用asp.net MVC 3，谢谢

I am using asp.net MVC 3. Thank you

推荐答案

而不是禁用AJAX联，你可以劫持上的链接的点击，并决定是否要使用 $。员额（）：

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);
    }
});

以上code期待您添加 AJAX岗位类要使用 $。交任何链接（） 方法。

在一个普通照会，事件。preventDefault（）是有用的停止任何其他处理的事件，所以你可以做你想做的与事件。如果你使用事件。preventDefault（）您必须声明事件作为函数它在一个参数。

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.

还有每个（）没有必要在code：

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

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

将工作得很好。

will work just fine.

您也可以关闭全局AJAX联通过结合 mobileinit 事件是这样的：

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

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

来源： http://jquerymobile.com/demos/1.0 /docs/api/globalconfig.html 的

这篇关于jQuery Mobile的AJAX发送GET和POST请求的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！