<!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()