javascript - 如何制作将 HTML 文件加载到 div 中的 XMLHttpRequest?

标签 javascript html ajax request 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>

关于javascript - 如何制作将 HTML 文件加载到 div 中的 XMLHttpRequest?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/44476100/

相关文章:

javascript - 使用nodejs查询MongoDb

php - 如何使用 PHP 为 JQuery .ajax() 返回正确的成功/错误消息?

具有相同 ID 的多个元素的 JavaScript 和 getElementById

javascript - jquery mobile 中未打开弹出窗口

javascript - 如何在 javascript 中向多边形添加图案?

html - 居中 DIV inside DIV with image

html - 如何在不更改 html 的情况下更改 float div 顺序?

html - Firefox 在呈现大型 html 表格(20,000 多行)时崩溃

php - SWFUpload:如何取消经典表单的上传

javascript - 如何使用 Ajax 和 Servlet 上传文件