bootstrap显示单击结果而不刷新页面

Question

我有一个页面，我把它分成两半。左侧将具有文本超链接或按钮，而在右侧，我需要显示结果而不刷新页面。我希望bootstrap有这样的东西，但一直无法找到它。任何帮助将不胜感激。

Answer 1

Bootstrap不提供AJAX呼叫，它还可以为您的网站设计样式。为此，您需要检查jQuery AJAX documentation。

修改

这是一个简单的AJAX调用示例。

index.php （基本HTML代码）

<div class="container">
    <div class="row">
        <div class="col-md-6">
            <button id="cats" data-animal="cats" class="btn btn-default">Text on cats</button>
            <button id="dogs" data-animal="dogs" class="btn btn-default">Text on dogs</button>
        </div>

        <div class="col-md-6">
            <div id="results"></div>
        </div>
    </div>
</div>

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="script.js"></script>

script.js （将在其中进行AJAX调用的脚本）

$(document).ready(function() {
    $("button").on('click', function(e) {
        e.preventDefault();

        var $this  = $(this),
            animal = $this.data('animal');

        $.ajax({
            type: "post",
            url: "getAnimal.php",
            dataType: "html",
            data: { pet : animal },
            success: function(data) {
                $("#results").html('').html(data);
            }
        });
    });
});

getAnimal.php （由AJAX调用的PHP脚本）

<?php
$animal = $_POST['pet'];

if($animal == "cats") {
   echo "You clicked on cats!";
}
else if($animal == "dogs") {
    echo "You clicked on dogs!";
}

Answer 2

这些链接是否都在同一个域中？如果是这样，使用jQuery的ajax API获取每个URL的内容并不太难。