Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
Python Flask + JavaScript XMLHttpRequest
<!DOCTYPE html>
<html>
<head>
<title>Practice AJAX</title>
<script type="text/javascript">
function do_ajax() {
var req = new XMLHttpRequest();
var result = document.getElementById('result');
req.onreadystatechange = function()
{
if(this.readyState == 4 && this.status == 200) {
result.innerHTML = this.responseText;
} else {
result.innerHTML = "処理中...";
}
}
req.open('POST', '/', true);
req.setRequestHeader('content-type', 'application/x-www-form-urlencoded;charset=UTF-8');
req.send("name=" + document.getElementById('name').value);
}
</script>
</head>
<body>
<form action="index" method="post">
<label>Name:<input type="text" id="name" value="" /></label>
<button type="button" id="btn-post" onclick="do_ajax();">Click</button>
<div id="result"></div>
</form>
</body>
</html>
from flask import Flask, request, render_template
app = Flask(__name__)
app.debug = True
@app.route("/", methods=['GET', 'POST'])
def index():
if request.method == "POST":
name = request.form["name"]
return name + " Hello"
return render_template("index.html")
if __name__ == "__main__":
app.run()
@robbyHuelsi
Copy link

robbyHuelsi commented Nov 2, 2017

Awesome!

@pawo161
Copy link

pawo161 commented May 22, 2019

Great job <3

@121eddie
Copy link

121eddie commented May 29, 2019

all-in-one!

@ma9edo
Copy link

ma9edo commented Dec 24, 2020

jinja2.exceptions.TemplateNotFound: index.html

@KentaYamada
Copy link
Author

KentaYamada commented Dec 24, 2020

@Ma9e

jinja2.exceptions.TemplateNotFound: index.html

Please use the following source tree.

|-- app
     |-- templates
           |-- index.html
     |-- server.py

How to rendering templates (flask document)
https://flask.palletsprojects.com/en/1.1.x/quickstart/#rendering-templates

@GFier
Copy link

GFier commented Jan 5, 2021

Helped me!! thanks.

@jackblank0
Copy link

jackblank0 commented Apr 1, 2021

but you sent a string to the server , then how server identifies "name" as a key . I tried the same. But it gives key error

@KentaYamada
Copy link
Author

KentaYamada commented Apr 10, 2021

@jackblank0

but you sent a string to the server , then how server identifies "name" as a key . I tried the same. But it gives key error

Did you use your browser's development tools to check if the form data was requested correctly?

@Revisto
Copy link

Revisto commented May 20, 2021

helped a lot, thank you

@weilin93
Copy link

weilin93 commented Jul 11, 2021

thanks for the tips!
could you take a look on my code please? I want update the inner html everytime when difference state is selected, but i got a 404 on my requested file. i dont understand why is that. I figure it might be something to do with server code but im not sure how to solve it.
Below here is my code and the error message.

Screen Shot 2021-07-11 at 12 01 36
Screen Shot 2021-07-11 at 12 05 31
Screen Shot 2021-07-11 at 12 15 32
Screen Shot 2021-07-09 at 18 40 09

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment