javascript - 当用户单击选项卡时，如何刷新 JSP 中选项卡的内容？

Question

我知道这是一个重复的问题。但是我没有找到解决问题的好方法。我创建了一个带有一些选项卡的 JSP 页面。当用户单击选项卡时，我想重新加载选项卡的内容。

<div class="navbar btn-navbar">
        <div id="tabs" class="tabbable">
            <ul id="myTab" class="nav nav-tabs">
                <li><a href="#datacollector" target="main"
                    data-toggle="tab">Data Collector</a></li>
                <li><a href="#fromDB" target="main"
                    data-toggle="tab">Data Load</a></li>
                <li><a href="#fromFile" target="main"
                    data-toggle="tab">Data Load</a></li>
                <li><a href="#email" target="main"
                    data-toggle="tab">Data Load</a></li>
                <li><a href="ajax/DataFieldMapping.jsp" target="main" data-toggle="tab">Data
                        Map</a></li>
                <li><a href="#schedule" target="main" data-toggle="tab">Schedule</a></li>
            </ul>

我的脚本应该是什么？

Answer 1

使用jQuery获取数据（使用 AJAX）。我猜你已经在使用jQuery UI了。我假设您想从 HTML 文件加载内容？

HTML

<div id="tabs">
  <ul>
    <li><a href="#tabs-1">Data Collector</a></li>
    <li><a href="#tabs-2">Data Load</a></li>
    <li><a href="#tabs-3">Data Load</a></li>
  </ul>
  <div id="tabs-1">
  </div>
  <div id="tabs-2">
  </div>
  <div id="tabs-3">
  </div>
</div>

JavaScript - 像这样初始化

$( "#tabs" ).tabs({
  beforeActivate: function( event, ui ) {
      var myData = {
              previousTabSelection: 5 // read previous tab data ...
      };

      $.get('/url/to/your/content.html', myData).done(function(contentHtml){
        ui.newPanel.html(contentHtml);
      });

      // or without params
      if(myData.previousTabSelection === 5 ){
             ui.newPanel.load('/url/to/your/content.html');
      }
  }
});

Answer 2

$('#tab-id-selector').click(function() {
    $.ajax({
        type:'POST', 
        url: 'targetUrl', 
        data: { 
        'foo': 'bar' //request parameters,In your case may be the tab ID to recognize on the server side  that which tab pressed
    }, 
        success: function(response) {
          //handle the data here ,means set the data where you want
        }
    });
});

http://api.jquery.com/jQuery.ajax/

Answer 3

为什么单击选项卡时需要重新加载内容？根据请求加载内容还不够吗？

    $("tab selector").click(function(){

        //do ajax-request to fetch data
        $.ajax({
            url: "/url/to/your/data",
            type: "GET",
            contentType: "application/json; charset=UTF8",
            success: (function (data) {
                //load your tab with your new data
            }),
            error: (function (data) {
            })
        });
    });