admin管理员组

文章数量:1289558

I'm trying to make an XMLHttpRequest that loads HTML from an external file and inserts the content of the file into the div.

When I run the function, it inserts the HTML in all of the body which is not adequate.

My code:

--------------------------> 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);
}

Thanks in advance.

I'm trying to make an XMLHttpRequest that loads HTML from an external file and inserts the content of the file into the div.

When I run the function, it inserts the HTML in all of the body which is not adequate.

My code:

--------------------------> 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);
}

Thanks in advance.

  • javascript
  • html
  • ajax
  • request
  • xmlhttprequest
Share Improve this question edited Feb 10, 2018 at 19:58 Mike 14.6k32 gold badges119 silver badges176 bronze badges asked Jun 10, 2017 at 17:26 Angelo GiuseppeAngelo Giuseppe 951 gold badge1 silver badge9 bronze badges 3
  • Have you tried document.getElementById("view").innerHTML = xmlhttp.responseText; ? – Sujan Adiga Commented Jun 10, 2017 at 17:30
  • nop, I´ll try with that – Angelo Giuseppe Commented Jun 10, 2017 at 17:31
  • I just updated the code with that part but It keeps doing the same as before mmm – Angelo Giuseppe Commented Jun 10, 2017 at 17:34
Add a ment  | 

1 Answer 1

Reset to default 8 

<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>

本文标签： javascriptHow to make an XMLHttpRequest that loads an HTML file into the divStack Overflow

版权声明：本文标题：javascript - How to make an XMLHttpRequest that loads an HTML file into the div? - Stack Overflow 内容由网友自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：http://www.betaflare.com/web/1741404799a2376878.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。