Question

我遇到了这个问题：How do I load an HTML page in a <div> using JavaScript?

我想基本上对POST数据做同样的事情，但我不知道从哪里开始。

现有脚本仅适用于get请求吗？

<script>
      function load_home(){
            document.getElementById("content").innerHTML='<object type="type/html" data="home.html" ></object>'; 
  }
</script>

如果可以避免使用jQuery，我想避免使用它。

Answer 1

您可以使用您在评论中发布的相同ajax示例，方法是将http://www.yoursite.com/home.html更改为home.html

类似于以下

在Javascript中，

<script>
function load_home(e, getwhat){ // <--- send which html file to get and display the content in argument 'getwhat'
    e.preventDefault();
    var con = document.getElementById('content');
    var xhr = new XMLHttpRequest();
    xhr.open("POST", getwhat, true); // <-- this is post request
    //xhr.open("GET", getwhat, true); // <-- this is get request
    xhr.setRequestHeader('Content-type', 'text/html');
    xhr.onreadystatechange = function(e) {
        if(xhr.readyState == 4 && xhr.status == 200) {
            con.innerHTML = xhr.responseText;
        }
    }
    xhr.send();
}
</script>

在HTML中，

<a href="#" onclick="load_home(event, 'home.html')"> HOME </a>
<a href="#" onclick="load_home(event, 'aboutus.html')"> ABOUT US </a>
<a href="#" onclick="load_home(event, 'service.html')"> SERVICE </a>
<div id="content"></div>

Answer 2

最好的方法是使用像这个工作演示的jquery

<强> HTML

 <nav id="menu" class="menu-side">
    <a href="../pages/theAboutPage.html" id="about">About</a>
    <a href="../pages/theHelpPage.html" id="help">Help</a>
    <a href="../pages/theContactPage.html" id="contact">Contact</a>
</nav>
<div id="target">
    <!-- content is being loaded here from other .html files -->
</div>

<强>的javascript

    $(function() {
    var $menu = $('#menu'), 
        $target = $('#target');

    $menu.on('click', '> a', function(event) {
        var $this = $(this);
        event.preventDefault();
        $target.load($this.attr('href'));
    });
})

如何发布帖子并将内容返回<div>标签？

2 个答案: