Question

我正在尝试将jquery ui从1.9.2升级到jquery ui 1.11.4，并且我发现已从制表符控件中删除了ajaxOptions。我一直在用：

$("#tabs").tabs({
    ajaxOptions: {
    error: (function (x, y, z) { AjaxError(x, y, z) }),
    data: { somefield: $("#somefield").val() },
    type: 'POST'
    }
 });

我已将代码更改为：

$("#tabs").tabs({
    beforeLoad: function (event, ui) {
        ui.ajaxSettings.method = 'POST';
        ui.ajaxSettings.error = function (x, y, z) { AjaxError(x, y, z) };
        ui.ajaxSettings.url += "?somefield=" + $("#somefield").val();
    }
});

但是此时无法更改ui.ajaxSettings.method。 API文档声明：

需要在beforeLoad之前处理数据。来自 API文档：注意：虽然提供了ui.ajaxSettings，但可以被修改，其中一些设置已经被处理过 jQuery的。例如，已经应用了预过滤器，数据已经过处理，类型已确定。 beforeLoad事件发生同时，因此具有相同的限制 beforeSend from jQuery.ajax（）。

但是如何将方法更改为POST？

Answer 1

看看是否有帮助

`

beforeLoad: function( event, ui ) {
   ui.ajaxSettings.type = 'POST'; 
   ui.ajaxSettings.hasContent = true;
   ui.jqXHR.setRequestHeader( "Content-Type", ui.ajaxSettings.contentType );
   ui.ajaxSettings.data = jQuery.param( { foo: 'bar'}, ui.ajaxSettings.traditional );
}

`

参考：http://bugs.jqueryui.com/ticket/8673

Answer 2

请尝试使用以下内容，而不是使用beforeLoad：

var tabData = {};
$("#tabs").tabs({
    // select data in the tab
    select: function(event, ui) {
        tabData = {
            data: $('#yourData').serialize();
        };
    },
    ajaxOptions: {
        type: 'POST',
        data: tabData,
        error: function(x, y, z) { AjaxError(x, y, z) }
    }
});

select方法用于从活动标签中抓取数据。

Answer 3

毫无疑问，这不是最优雅的解决方案，但在尝试了一些建议来解决这个问题（并且没有一个工作）之后，我尝试了一种不同的方法。基本上，我没有使用内置的AJAX函数（beforeLoad，load），而是将选项卡设置为预先加载，然后使用activate事件加载选项卡数据。

HTML：

<div id='tabs'>
  <ul>
    <li><a href='#tab1'>Tab 1</a></li>
    <li><a href='#tab2'>Tab 2</a></li>
  </ul>
  <div id='tab1'><p>Loading...</p></div>
  <div id='tab2'><p>Loading...</p></div>
</div>

使用Javascript：

jQuery("#tabs").tabs({
    active: 0,
    activate: function(event, ui) {
        var active = jQuery("#tabs").tabs("option","active");
        switch (active) {
          case 0:
            LoadTab0(ui.newPanel);
            break;
          case 1:
            LoadTab1(ui.newPanel);
            break;
        }
    },
    create: function(event, ui) {
        LoadTab0(ui.panel);
    }
});

function LoadTab0(panel) {
  var args = {
    // data to post here
  };
  jQuery.ajax({
    type: "POST",
    url: url,
    data: args
  })
    .done(function(result) {
        panel.html(result);
    });
}

function LoadTab1(panel) {
  var args = {
    // data to post here
  };
  jQuery.ajax({
    type: "POST",
    url: url,
    data: args
  })
    .done(function(result) {
        panel.html(result);
    });
}

jQuery UI文档指出：＆＃34;由于激活事件仅在选项卡激活时触发，因此在创建选项卡窗口小部件时不会触发初始选项卡。如果您需要创建窗口小部件的钩子，请使用create事件。＆＃34;因此，您必须使用create事件并只调用与您设置的active选项对应的函数（在示例中为0）。

如何在jQuery v1.11.4选项卡中使用POST方法

3 个答案: