HTML - Request URL Without Displaying

Chet T16 · 21-12-2012 01:31AM #1

I have a problem i'm trying to solve here but its beyond my limited knowledge.

Say i have a page with a button and when i click the button i want to request a URL from a different server but without changing from my page.

This is what i have so far that works:

<?php
if(isset($_POST['off'])) {
$html = file_get_contents('https://url1');
}
if(isset($_POST['on'])) {
$html = file_get_contents('https://url2');
}
?>
<form action="<?=$_SERVER['PHP_SELF'];?>" method="post">
<input type="submit" name="off" value="OFF">
</form>
<form action="<?=$_SERVER['PHP_SELF'];?>" method="post">
<input type="submit" name="on" value="ON">
</form>

The thing i don't like is that its refreshing the page and also that its submitting forms so i get the annoying 'data resubmission' warning if i manually refresh.

Any better solutions?

Dave! · 21-12-2012 02:06AM

If you want to request the data without refreshing the page, then you'll have to look into AJAX.

Chet T16 · 22-12-2012 12:01AM

Dave! wrote: »

If you want to request the data without refreshing the page, then you'll have to look into AJAX.

Some googling got me this ajax example

<!DOCTYPE html>
<html>
<head>
<script>
function loadXMLDoc()
{
var xmlhttp;
if (window.XMLHttpRequest)
{// code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp=new XMLHttpRequest();
}
else
{// code for IE6, IE5
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.onreadystatechange=function()
{
if (xmlhttp.readyState==4 && xmlhttp.status==200)
{
document.getElementById("myDiv").innerHTML=xmlhttp.responseText;
}
}
xmlhttp.open("GET","ajax_info.txt",true);
xmlhttp.send();
}
</script>
</head>
<body>

<div id="myDiv"><h2>Let AJAX change this text</h2></div>
<button type="button" onclick="loadXMLDoc()">Change Content</button>

</body>
</html>

If i change "ajax_info.txt" to my URL it works. I just need to get my head around what the important bits of code are. Thanks for the pointer

Dave! · 22-12-2012 12:06AM

I'd instead take this as an opportunity to start looking into jQuery if youre not already! It's the de facto standard library for JavaScript which employers look for in an employee. But it also has handy ajax functions which make it easier to do asynchronous stuff than the xmlhttprequest object.

HTML - Request URL Without Displaying

Comments