如何使用帖子(不获取)强制使用ajax并在jquery选项卡中显示响应? [英] how to force ajax using post (not get) and display the response in jquery tabs?

问题描述

我有以下html和脚本

hi i have the follow html and script

<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返回是

The ajax return from my program is

{"test_element":"test"}

如何强制使用post强制jquery选项卡，并且上述javascript无法在相对选项卡中显示响应(警报也无法工作)

How can i force the jquery tabs using post and the above javascript can't get the response to be displayed in the relative tabs (also alert can not work)

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

---------------update--------------

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

我仍然无法使其显示在选项卡中

i still can't make it displays in the tab

----------更新第二个------------

----------update 2nd------------

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的帮助下进行最终修复----------

----------final fix with help from 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;
        }
      }
    })

  });

推荐答案

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

You can use the beforeLoad callback to do this like

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

演示:柱塞

这篇关于如何使用帖子(不获取)强制使用ajax并在jquery选项卡中显示响应?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！