如何使用 post（而不是 get）强制 ajax 并在 jquery 选项卡中显示响应？

Question

嗨，我有以下 html 和脚本

<link rel="stylesheet" href="//code.jquery.com/ui/1.11.1/themes/smoothness/jquery-ui.css">
<script src="//code.jquery.com/ui/1.11.1/jquery-ui.js"></script>

  <script>
  jQuery(function() {

    jQuery("#tabs").tabs({
        /*beforeLoad: function(event, ui){
            alert('loading');
        },
            load: function(event, ui){
            alert('loaded');
        }*/
        ajaxOptions: {
            dataFilter: function(result){
                var data = jQuery.parseJSON(result);
                alert(data.test_element);
                return data.test_element;
            }
        },

      /*beforeLoad: function( event, ui ) {
        ui.jqXHR.error(function() {
          ui.panel.html(
            "Couldn't load this tab. We'll try to fix this as soon as possible. " +
            "If this wouldn't be a demo." );
        });
      }*/
    });
  });
  </script>

  <div id="tabs">
  <ul>
    <li><a href="#tabs-1">Preloaded</a></li>
    <li><a href="ajax/content1.html">Tab 1</a></li>
    <li><a href="ajax/content2.html">Tab 2</a></li>
    <li><a href="productstab/ajax/index">Tab 3 (slow)</a></li>
    <li><a href="ajax/content4-broken.php">Tab 4 (broken)</a></li>
  </ul>
  <div id="tabs-1">
    <p>Proin elit arcu, rutrum commodo, vehicula tempus, commodo a, risus. Curabitur nec arcu. Donec sollicitudin mi sit amet mauris. Nam elementum quam ullamcorper ante. Etiam aliquet massa et lorem. Mauris dapibus lacus auctor risus. Aenean tempor ullamcorper leo. Vivamus sed magna quis ligula eleifend adipiscing. Duis orci. Aliquam sodales tortor vitae ipsum. Aliquam nulla. Duis aliquam molestie erat. Ut et mauris vel pede varius sollicitudin. Sed ut dolor nec orci tincidunt interdum. Phasellus ipsum. Nunc tristique tempus lectus.</p>
  </div>
</div>

我的程序返回的ajax是

{"test_element":"test"}

如何使用 post 强制 jquery 选项卡，而上面的 javascript 无法在相关选项卡中显示响应（警报也不起作用）

---------------更新--------------

    beforeLoad: function (event, ui) {
        if (ui.ajaxSettings.url == 'productstab/ajax/index') {
            ui.ajaxSettings.type = 'post';
        }
        ui.ajaxSettings.dataFilter = function (data, type) {
            var html = jQuery.parseJSON(data);
            //alert(data + 'abc');
            alert(html.test_element);
            return html.test_element + ' modified';
        }
    }

我仍然无法让它显示在标签中

---------更新第二次------------

jQuery(function($){

    $('#tabs').tabs({
      beforeLoad: function( event, ui ) {
        console.log(ui.ajaxSettings);
        if(ui.ajaxSettings.url == 'productstab/ajax/index'){
          ui.ajaxSettings.type = 'post';
        }
        ui.ajaxSettings.dataFilter = function(data, type){
        //alert(data);
        var temp = data;
        alert(temp);
        var data1=jQuery.parseJSON(temp);
        //alert('data' + data);
        if(typeof data1 =='object') {
            alert(data1.test_element + ' element');
            //return data1;
        } else {
            alert(data + 'modified');
            //return data + ' modified';
        }
        //alert(data1);
          return data;  
        }
      }
    })

    });

---------在 Arun 的帮助下最终修复---------

  jQuery(function($){

    $('#tabs').tabs({
      beforeLoad: function( event, ui ) {
        console.log(ui.ajaxSettings);
        if(ui.ajaxSettings.url == 'productstab/ajax/index'){
          ui.ajaxSettings.type = 'post';
        }
        ui.ajaxSettings.dataFilter = function(data, type){

        var html = data,
                   obj;
        try {
            obj = jQuery.parseJSON(data);
            html = obj.test_element;
        } catch (e) {}
            return html;
        }
      }
    })

  });

Answer 1

您可以使用 beforeLoad 回调来执行此操作

jQuery(function ($) {
    $("#tabs").tabs({
        beforeLoad: function (event, ui) {
            if (ui.ajaxSettings.url == 'content2.html') {
                ui.ajaxSettings.type = 'post';
            }
            ui.ajaxSettings.dataFilter = function (data, type) {
                return data + ' modified';
            }
        }
    });
});

演示：Plunker