Question

我有this code：

<!DOCTYPE html>
<body>
    <div id=div1 style="display:block;">
        <p id="intro">Hello World!</p>
        <p>This example demonstrates the <b>getElementById</b> method!</p>
    </div>
    <div id=div2 style="display:none;">
        <p id="intro">Hello World again!</p>
        <p>This example demonstrates the <b>getElementById</b> method!</p>
    </div>
    <button type="button" onclick="func()">Change div</button>
    <script>
        function func() {
            x = document.getElementById("div1");
            x.style.display = "none";
            x1 = document.getElementById("div2");
            x1.style.display = "block";
        }
    </script>
</body>

它基本上会在按钮点击时显示div2。

当div2和div1在同一个文件中时，这可以正常工作。我希望div2在不同的文件中，当我们点击按钮而不更改网址时显示。

实现此目的的一种方法是使用iframe并在按钮点击时更改iframe的url（其中div2在那里）。

还有其他方法可以达到这个目的吗？

我对html和javascript非常新，所以带答案的解释会有很大帮助。谢谢！

Answer 1

对于您希望在页面上动态发生的这类事物而不需要加载整个页面，您需要使用AJAX。

以下代码可以帮助您理解使用AJAX的一些非常基本的技术：

$(document).ready(function(){
    $("button").click(function(){
        alert('Load was performed.');
        $.get('target_file.html', function(data) {
            $('div').html(data);
            alert('Load was performed.');
        });
    });
});

更具体地说，您可以从目标文件中找到<div>，如下所示：

$("div").html(data.find("#div_id"));

还有一件事。如果你想使用PHP，你可以在这里看到这篇文章：

php: Get html source code with cURL

Answer 2

如果您不想使用iframe，则需要使用AJAX。见http://en.wikipedia.org/wiki/Ajax_(programming)

在按钮单击上显示来自其他html文件的div

2 个答案: