Skip to content

Instantly share code, notes, and snippets.

Created January 2, 2017 13:33
What would you like to do?
Python Flask + JavaScript XMLHttpRequest
<!DOCTYPE html>
<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 = "処理中...";
}'POST', '/', true);
req.setRequestHeader('content-type', 'application/x-www-form-urlencoded;charset=UTF-8');
req.send("name=" + document.getElementById('name').value);
<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>
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__":
Copy link


Copy link

pawo161 commented May 22, 2019

Great job <3

Copy link


Copy link

ma9edo commented Dec 24, 2020

jinja2.exceptions.TemplateNotFound: index.html

Copy link


jinja2.exceptions.TemplateNotFound: index.html

Please use the following source tree.

|-- app
     |-- templates
           |-- index.html

How to rendering templates (flask document)

Copy link

GFier commented Jan 5, 2021

Helped me!! thanks.

Copy link

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

Copy link


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?

Copy link

Revisto commented May 20, 2021

helped a lot, thank you

Copy link

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