簡體   English   中英

如何使XMLHttpRequest將HTML文件加載到div中?

[英]How to make an XMLHttpRequest that loads an HTML file into the div?

我正在嘗試制作一個XMLHttpRequest ,該XMLHttpRequest可以從外部文件加載HTML並將文件的內容插入div

當我運行該函數時,它將HTML插入所有正文中,這是不夠的。

我的代碼:

--------------------------> HTML <--------------------- -----

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <script src="shit.js" charset="utf-8"></script>
    <link rel="stylesheet" href="index.css">
    <title>Test</title>
</head>
<body>
    <button type="button" name="button" onclick="send()">Click me</button>
    <div class="view" id="view"></div>
</body>
</html>

--------------------------> CSS <--------------------- -----

.view {
    margin-top: 5vh;
    height: 15vh;
    width: 80vw;
    background-color: #c1c1c1;
}

--------------------------> JS <--------------------- -----

function send() {
    var xmlhttp = new XMLHttpRequest();

    xmlhttp.onreadystatechange = function () {
        if (xmlhttp.readyState == 4) {
            document.write(xmlhttp.responseText);
        }
    }

    var params = "type=search" + "&content=" + encodeURIComponent(document.getElementById("view").innerHTML);

    xmlhttp.open("GET", "/include/link1.html", true);
    xmlhttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
    xmlhttp.setRequestHeader("Content-length", params.length);
    xmlhttp.send(params);
}    

提前致謝。

 <html> <head> <script> var request; function sendInfo() { var url = "NewFile1.html"; if (window.XMLHttpRequest) { request = new XMLHttpRequest(); } else if (window.ActiveXObject) { request = new ActiveXObject("Microsoft.XMLHTTP"); } try { request.onreadystatechange = getInfo; request.open("GET", url, true); request.send(); } catch (e) { alert("Unable to connect to server"); } } function getInfo() { if (request.readyState == 4) { var val = request.responseText; document.getElementById('chiru').innerHTML = val; } } </script> </head> <body> <marquee><h1>This is an example of ajax</h1></marquee> <form name="vinform"> <input type="button" value="ShowTable" onClick="sendInfo()"> </form> <span id="chiru"> </span> </body> </html> 

暫無
暫無

聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.

 
粵ICP備18138465號  © 2020-2024 STACKOOM.COM