Question

我已经通过索引页面设置了Bootstraps nav-tabs。每个选项卡通过AJAX加载一个单独的PHP文件：

<div class="container">
    <ul class="nav nav-tabs" id="indextabs">
        <li><a href="notes.php" data-target="#notes" data-toggle="tabchange">NOTES</a></li>
        <li><a href="whois.php" data-target="#whois" data-toggle="tabchange">WHOIS</a></li>
        <li><a href="dig.php" data-target="#dig" data-toggle="tabchange">DIG</a></li>
        <li><a href="ets.php" data-target="#ets" data-toggle="tabchange">ETS</a></li>
        <li><a href="resources.php" data-target="#resources" data-toggle="tabchange">RESOURCES</a></li>
    </ul>
</div>

负责AJAX查询的JavaScript：

window.onload = function() {
$('[data-toggle="tabchange"]').click(function(e) {
var $this = $(this),
    loadurl = $this.attr('href'),
    targ = $this.attr('data-target');

$.get(loadurl, function(data) {
    $(targ).html(data);
});

$this.tab('show');
return false;
});
}

这本身很好用。但是，在某些选项卡中，有一个输入需要一个域名，然后需要通过GET请求提交，以便URL可以是：

http://domain.com/?domain=google.com&record=mx

考虑到这一点，我有两个问题：

如何使用GET方法网址加载特定标签？
如何使用GET方法通过AJAX提交表单数据并让它更改URL并在tab-panel div中加载内容？

Answer 1

请考虑以下更多评论，因为我不确定您的案例中最优（也有效）。无论如何，我认为您需要在$get method call中传递查询参数，可以是对象，键值对{ domain: 'google.com', record: 'mx'}或字符串形式。下面使用对象/键值对。

window.onload = function() {
$('[data-toggle="tabchange"]').click(function(e) {

var $this = $(this),
  loadurl = $this.attr('href'),
  targ = $this.attr('data-target');

//optional method call below, uncomment if needed
//loadurl = getDomainURL() + "/" + loadurl


  $.get(loadurl, {
     domain: 'google.com',
     record: 'mx'
    }, 
    function(data) {
    $(targ).html(data);
  });

  $this.tab('show');
  return false;
 });
}


//returns domain name: www.example.com in form of http://example.com
// or domain name: http://example.com is returned as it is, unchanged http://example.com
function getDomainURL() {

  var index = window.location.hostname.indexOf("www.");

  if (index === 0)
    return "http://" + window.location.hostname.substr((index + 4));
  else
    return "http://" + window.location.hostname;

}

通过GET URL加载Bootstrap nav nav-tabs

1 个答案: