Currently, I am in the process of learning about AJAX by following the MDN tutorial. However, I have encountered an issue with the first sample code provided to fetch test.html. Regardless of whether I use absolute or relative paths, my local server consistently responds with a 404 error. I have researched similar questions on stackoverflow, but none of the solutions seem to resolve my problem.
Sharing my directory structure and source code:
|--templates
| |--index.html
| |--test.html
|
|--app.py
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>index</title>
</head>
<body>
<button id="ajaxButton" type="button">Make a request</button>
<script>
(function(){
let httpRequest
document.getElementById("ajaxButton").addEventListener('click', makeRequest)
function makeRequest() {
httpRequest = new XMLHttpRequest()
if (!httpRequest) {
alert('Giving up: can not create an XMLHTTP instance')
return false
}
httpRequest.onreadystatechange = alertContents
httpRequest.open('GET', 'test.html', true)
httpRequest.send()
}
function alertContents() {
if (httpRequest.readyState === XMLHttpRequest.DONE) {
if (httpRequest.status === 200) {
alert(httpRequest.responseText)
}else {
alert('There was a problem with the request.')
}
}
}
})();
</script>
</body>
</html>After attempting templates/test.html and moving test.html outside of the templates directory, I continue to receive a 404 error even though the URL shown in the console is
http://127.0.0.1:5000/templates/test.htmlI suspect that there might be a misunderstanding on my part regarding URLs, servers, or it could be related to Flask?
As a reference, here is the content of app.py:
from flask import Flask, render_template
app = Flask(
__name__,
template_folder='./templates'
)
@app.route('/')
def index():
return render_template('index.html')