Issue
Hi everyone and thanks for viewing my question, I'm trying to build and application using Flask to send html,css and js file paths to flask (after open() & read() the files content) send them to html and view the codes there.
I'm using AJAX to post a data to this url: "/getFiles" ; the data is being sent successfully and printed but the code is stopping just before returning.
I tried Axios but had the same exact results.
I tried to change contentType: "application/json" to contentType: "json" but the code stopped working then.
I tried to render to another page different than index.html but that didn't help as well.
I tried to return just with
return "OK" , 200but even this didn't work.
I've done a simplified version of the code to let you focus on the problem.
here is my python code:
from flask import *
app = Flask(__name__)
@app.route('/', methods=["GET"])
def homepage():
return render_template('index.html')
@app.route('/getFiles', methods=['POST'])
def getFiles():
data = request.get_json()
print(data)
htmlFile = data['html']
cssFile = data['css']
jsFile = data['js']
return render_template('index.html', html=htmlFile, css=cssFile, js=jsFile)
if __name__ == '__main__':
app.run("0.0.0.0", port=5500)
and here's my HTML code :
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.js"></script>
<title>Document</title>
</head>
<body>
<p>html files :</p>
<p>{{ html }}</p>
<p>css files :</p>
<p>{{ css }}</p>
<p>js files :</p>
<p>{{ js }}</p>
<button id="clickMe">Bring Data</button>
</body>
<script>
$("#clickMe").on("click", function () {
$.ajax({
url: "/getFiles",
type: "post",
contentType: "application/json",
data: JSON.stringify({
html: "html files",
css: "css_files",
js: "js files ",
}),
})
.done(function (result) {
console.log("message sent!");
$("#data").html(result);
})
.fail(function (jqXHR, textStatus, errorThrown) {
console.log("failed to send! ");
});
});
</script>
</html>
When I'm running my code this is what I get in Python logs
C:\Users\z420\Desktop\small test>python views.py
* Serving Flask app 'views' (lazy loading)
* Environment: production
WARNING: This is a development server. Do not use it in a production deployment.
Use a production WSGI server instead.
* Debug mode: off
* Running on all addresses.
WARNING: This is a development server. Do not use it in a production deployment.
* Running on http://192.168.147.110:5500/ (Press CTRL+C to quit)
127.0.0.1 - - [02/Jul/2021 15:44:50] "GET / HTTP/1.1" 200 -
{'html': 'html files', 'css': 'css_files', 'js': 'js files '}
127.0.0.1 - - [02/Jul/2021 15:44:51] "POST /getFiles HTTP/1.1" 200 -
data is printed but no rendering...
Solution
if you want to show the file names. you have to return the file names in python dict. and use javascript to show them on webpage.
[...]
return {"html":htmlFile,"css":cssFile,"js":jsFile}
replace the p tags with a div with id files <div id="files"></div>
in js(jquery):
.done(function (result) {
console.log("message sent!");
console.log(result)
$("#files").html(`<p>html files :</p><p>${result.html}</p><p>css files :</p><p>${result.css}</p><p>js files :</p><p>${result.js}</p>`)})
this will edit and display the content you want.
Answered By - charchit
0 comments:
Post a Comment
Note: Only a member of this blog may post a comment.