In my Xampp htdocs file I have placed the html code below, and a php file, test.php, whose contents are also given below. When I click the button I get no error messages and, alas, no indication that the php program has run. Any suggestions ?
I should also add that, using the: form action = "http://localhost/test.php" construct, the test.php does actually execute.
<!DOCTYPE html>
<html>
<head>
<script>
var xmlhttp;
function loadXMLDoc() {
xmlhttp = new XMLHttpRequest();
xmlhttp.onreadystatechange = function() {
if (this.readyState == 4 && this.status == 200) {
document.getElementById("demo").innerHTML = "xxx";
} ;
}
xmlhttp.open("GET", "http://localhost/test.php", true);
xmlhttp.send();
}
</script>
</head>
<body>
<h2>Using the XMLHttpRequest object</h2>
<button type="button" onclick="loadXMLDoc()">Change Content</button>
<p id="demo"></p>
</body>
The test.php module is just:
<?php
echo "Hello there"
?>
Related
I have created a script within google sheets. It gives a result of a cell from my table in google sheets(kinda database). I want the result send to my html page, and i have tried so far with XMLHttprequest but with no success.
What have i done wrong?
Here is the Script
<script>
function load() {
var xhttp = new XMLHttpRequest();
xhttp.onreadystatechange = function() {
if (this.readyState == 4 && this.status == 200) {
document.getElementById("demo").innerHTML = this.responseText;
}
};
xhttp.open("GET", "https://script.google.com/macros/s/AKfycby5RzvUWSEOjerJpouxN72wpsgpsF8IWQo2AvjZUdRPcqskz28/exec", true);
xhttp.send();
}
</script>
<html>
<body>
<h1>Members:</h1>
<button type="button" onclick="load()">Request data</button>
<p id="demo"></p>
</body>
</html>
To read a spreadsheet from google:
download a script called Tabletop and add it to your HTML. (The readme is here)
In Google Docs go up to the File menu and pick Publish to the web. Then click Start publishing. A URL will appear, something like https://docs.google.com/spreadsheet/pub?hl=en_US&hl=en_US&key=0AmYzu_s7QHsmdDNZUzRlYldnWTZCLXdrMXlYQzVxSFE&output=html, that is the URL you will use.
Then call it with this:
<script type="text/javascript">
var public_spreadshseet_url = 'https://docs.google.com/spreadsheet/pub?YOUR_URL_HERE';
// YOUR_URL_HERE sample: hl=en_US&hl=en_US&key=0AmYzu_s7QHsmdDNZUzRlYldnWTZCLXdrMXlYQzVxSFE&output=html
// You get this URL from google docs after you publish the spreadsheet
function init()
{
Tabletop.init(
{
key: public_spreadshseet_url,
callback: showInfo,
simpleSheet: true
})
}
// This function gets called to give output
function showInfo(data)
{
alert("Successfully processed!")
console.log(data); <-- Here is the spreadsheet data
}
</script>
<html>
<body>
<h1>Members:</h1>
<button type="button" onclick="init()">Request data</button>
<p id="demo"></p>
</body>
</html>
I have a PHP script picQuery.php which returns the path to a picture. I have another script which calls the picQuery.php and should then display the picture, but I cannot figure out how to do it.
The code I have displays the file path in picFrame. What I want is something like the following line which I have commented out as it doesn't work. How should it be written?
HTML:
<!DOCTYPE html>
<html>
<body>
<form action="">
<button type="button" onclick="getPic(this.value)">Click Me!</button>
</form>
<p id="picFrame"</p>
<!--<img src=<p id="picFrame"</p> alt="text" style="width:304px;height:228px;">-->
<script>
function getPic() {
var xhttp;
xhttp = new XMLHttpRequest();
xhttp.onreadystatechange = function() {
if (this.readyState == 4 && this.status == 200) {
document.getElementById("picFrame").innerHTML = this.responseText;
alert('response = '.this.responseText);
}
};
xhttp.open("GET", "picQuery.php?q=4", true);
xhttp.send();
}
</script>
</body>
</html>
picQuery.php
<!DOCTYPE html> <html> <body> <?php echo "PIC1.jpg" ?> </body> </html>
There are multiple ways this could be achieved.
The simplest might be to create an instance of Image, assign the responseText to the src property of the image, set the style property accordingly, and then set the innerHTML of the element with id value picFrame to the outerHTML of the image.
xhttp.onreadystatechange = function() {
if (this.readyState == 4 && this.status == 200) {
var image = new Image();
image.src= this.responseText;
image.style = "width:304px;height:228px;";
document.getElementById("picFrame").innerHTML = image.outerHTML;
}
}
See it demonstrated in this phpfiddle.
Otherwise the <img> tag that is currently commented out could be used if the id attribute was changed or if it was accessed via the DOM as a child of the paragraph element. Though if the initial value of the src property is empty or an invalid URL for an image, then the browser might display a broken image icon.
So the image could be updated like this:
<p id="picFrame">
<img alt="text" id="picFrameImg" style="width:304px;height:228px;" />
</p>
And then accessed via Javascript:
xhttp.onreadystatechange = function() {
if (this.readyState == 4 && this.status == 200) {
document.getElementById('picFrameImg').src = this.responseText;
}
See a demonstration of this below. Hopefully the AJAX still works in the long term, though it might not, given the phpfiddle code files. If it stops working, this plunker might be a good demonstration but bear in mind that picQuery.php is NOT being executed as a regular PHP file.
function getPic() {
var xhttp;
xhttp = new XMLHttpRequest();
xhttp.onreadystatechange = function() {
if (this.readyState == 4 && this.status == 200) {
document.getElementById("picFrameImg").src = this.responseText;
}
};
xhttp.open("GET", "http://main.xfiddle.com/code_65644594.php?q=4", true);
xhttp.send();
}
<form action="">
<button type="button" onclick="getPic(this.value)">Click Me!</button>
</form>
<p id="picFrame">
<img alt="text" id="picFrameImg" style="width:304px;height:228px;" src="" />
</p>
UPDATE 4/21/2017
The PHP code provided will not work with the AJAX approach. It should return the path of the image without the html tags around it.
So update the PHP from:
<!DOCTYPE html> <html> <body> <?php echo "PIC1.jpg" ?> </body> </html>
To this:
<?php echo "PIC1.jpg"; ?>
That way, the AJAX code will essentially be updating the image tag from
<img alt="text" id="picFrameImg" style="width:304px;height:228px;" />
to this:
<img alt="text" id="picFrameImg" style="width:304px;height:228px;" src="PIC1.jpg" />
I wrote a simple html file with form data and used XMLHttpRequest to post data to another python cgi script, but for some reason, the python script does not do what it is supposed to do. After passing the data from the html to python, the cgi script is supposed to create a text file and write a line into that text file, but the text file is not created after I click the 'Run' button. Any idea why this happened? Here's the html code and python script:
----HTML----
<html>
<head> <title> TEST </title> </head>
<script type="text/javascript">
function run(){
var facPath = document.forms["inputParams"]["FacPath"].value;
var facId = document.forms["inputParams"]["IdName"].value;
var xhttp;
if (window.XMLHttpRequest) {
xhttp = new XMLHttpRequest();
} else {
xhttp = new ActiveXObject("Microsoft.XMLHTTP");
}
xhttp.onreadystatechange = function() {
if (this.readyState == 4 && this.status == 200) {
document.getElementById("response").innerHTML = this.responseText;
}
};
xhttp.open("POST", "/cgi-bin/processRequest.py", true);
xhttp.setRequestHeader("Content-type", "application/x-www-form-
urlencoded");
xhttp.send("facPath="+facPath+"&facId="+facId);
}
</script>
<body>
<P>
<form name="inputParams" >
Factor File Path <BR>
<input type="text" name="FacPath"> <BR><BR>
Factor ID Name <BR>
<input type="text" name="IdName"> <BR><BR>
<input type="button" value="Run" name="submit" onclick="run()">
</form>
</P>
<div id="response"> </div>
</body>
</html>
----Python cgi script----
import cgi
import sys
form = cgi.FieldStorage()
facPath = form.getvalue('facPath','None')
if facPath:
with open(r'C:\Users\XXX\inputSpec.txt','w') as outputFile:
outputFile.write(facPath)
sys.stdout.write("Status: 200 OK\n")
sys.stdout.write("Content-Type: text/plain\n")
sys.stdout.write("\n")
sys.stdout.write("Success.")
Do I need to make the python script executable? Or is it some other reason? Thank you.
The JavaScript below was adapted from W3Schools. Basically, I just added the URL path to my Servlet in the JS code below.
The Servlet on the server simply returns one of two strings:
(1) GET: Hello from Ajax Server! (**GET**)
(2) POST:Hello from Ajax Server! (**POST**)
The code for the doGet() and doPost() Servlet methods is to just create a PrintWriter from the Response and write a string to it.
The JavaScript below does nothing when I run it by clicking the button. I've omitted the URL to the actual server in the JS code below since that's the customer's site.
Any suggestions would be most welcome.
Thanks,
<!DOCTYPE html>
<html>
<body>
<h2>AJAX</h2>
<button type="button" onclick="loadDoc()">Request data</button>
<p id="demo"></p>
<script>
function loadDoc() {
var xhttp = new XMLHttpRequest();
xhttp.onreadystatechange = function() {
if (xhttp.readyState == 4 && xhttp.status == 200) {
document.getElementById("demo").innerHTML = xmlhttp.responseText;
};
xhttp.open("GET", "<path_to_server>:8080/AjaxSvr/ajax", true);
xhttp.send();
}
</script>
</body>
</html>
I am trying to implement Ajax calling and i came across the follwing code:
<!DOCTYPE html>
<html>
<body>
<p id="demo">Let AJAX change this text.</p>
<button type="button" onclick="loadDoc()">Change Content</button>
<script>
function loadDoc() {
var xhttp;
if (window.XMLHttpRequest) {
xhttp = new XMLHttpRequest();
} else {
xhttp = new ActiveXObject("Microsoft.XMLHTTP");
}
xhttp.onreadystatechange = function() {
if (xhttp.readyState == 4 && xhttp.status == 200) {
document.getElementById("demo").innerHTML = xhttp.responseText;
}
}
xhttp.open("GET", "www.google.com", true);
xhttp.send();
}
</script>
</body>
</html>
I am tring to access the URl but ended up in error saying "XHR cannot load".
I know it is something related with CORS. I went through several pages but i am finding it difficult to understand the issue. can somebody please explain and resolve this issue?? Will be helpul
Google dont allow cross domain access to their search engine. Your method seems ok, its just the url you are trying to access doesn't allow your domain.
Try it with a file hosted on your local machine