如何发帖并将内容返回到 <div> 标签？答案

【问题标题】：How do I make a post and return the contents into <div> tags?如何发帖并将内容返回到 <div> 标签？
【发布时间】：2016-01-05 06:15:29
【问题描述】：

我遇到了这个问题：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。

【问题讨论】：

相同的链接也有一个答案，即进行 ajax 调用（纯 js）来获取 html。您是否使用 post 请求尝试过该代码？
我没有，我不确定语法会是什么样子。这是获取请求的函数。 function load_home (e) { (e || window.event).preventDefault(); var con = document.getElementById('content') , xhr = new XMLHttpRequest(); xhr.onreadystatechange = function (e) { if (xhr.readyState == 4 && xhr.status == 200) { con.innerHTML = xhr.responseText; } } xhr.open("GET", "yoursite.com/home.html", true); xhr.setRequestHeader('内容类型', 'text/html'); xhr.send(); }
查看文档w3schools.com/ajax/ajax_xmlhttprequest_send.asp

标签： javascript html ajax post http-post

【解决方案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>

【讨论】：

这不是 POST 示例
你能解释一下POST是什么意思

【解决方案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'));
    });
})

【讨论】：

这个例子没有一个 POST 例子，并且使用了我希望避免的 jQuery。