KentaYamada/index.html

## index.html
<!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>

## server.py
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()
	<!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()