yen3/base.html

## base.html
<!doctype html>
<html>
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta name="description" content="">
        <meta name="author" content="">

        <link href="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/css/bootstrap-combined.no-icons.min.css" rel="stylesheet">
        <script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
        <style>
          body {
            padding-top: 60px; /* 60px to make the container go all the way to the bottom of the topbar */
          }
        </style>
    </head>
    <body>
        <div class="container">
            <form action="">
                <input id="name" type="text" value="Yen3"/>
                <input id="city" type="text" value="Changhwa"/>
            </form>
            <p id="message">{{ message }}</p>
            <p id="post_message">wait for post</p>
            <button class="btn" id="btn_test">test</button>
        </div>
        <script type="text/javascript">
            $("#btn_test").click(function(){
                $.post("/ajax_post_test",
                    {
                        name:$("#name").val(),
                        city:$("#city").val()
                    },
                    function(data, status){
                        $("#post_message").html(data);
                    });
            });
        </script>
    </body>
</html>

## main.py
#!/usr/local/bin/python
# -*- coding: utf-8 -*-

from flask import Flask, render_template, request, redirect, url_for

app = Flask('test_ajax')

@app.route("/ajax_post_test", methods=['POST'])
def ajax_post_test():
    if request.method == 'POST':
        print request.form["name"] + " " + request.form["city"]
        return "<p>Hello AJAX " + request.form["name"].upper() + " " + request.form["city"].upper() + " Test.</p>";

@app.route("/")
def main_page():
    return render_template("base.html", message="Hello World!")

if __name__ == "__main__":
    app.debug = True
    app.run()
	<!doctype html>
	<html>
	<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<meta name="description" content="">
	<meta name="author" content="">

	<link href="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/css/bootstrap-combined.no-icons.min.css" rel="stylesheet">
	<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
	<style>
	body {
	padding-top: 60px; /* 60px to make the container go all the way to the bottom of the topbar */
	}
	</style>
	</head>
	<body>
	<div class="container">
	<form action="">
	<input id="name" type="text" value="Yen3"/>
	<input id="city" type="text" value="Changhwa"/>
	</form>
	<p id="message">{{ message }}</p>
	<p id="post_message">wait for post</p>
	<button class="btn" id="btn_test">test</button>
	</div>
	<script type="text/javascript">
	$("#btn_test").click(function(){
	$.post("/ajax_post_test",
	{
	name:$("#name").val(),
	city:$("#city").val()
	},
	function(data, status){
	$("#post_message").html(data);
	});
	});
	</script>
	</body>
	</html>
	#!/usr/local/bin/python
	# -- coding: utf-8 --

	from flask import Flask, render_template, request, redirect, url_for

	app = Flask('test_ajax')

	@app.route("/ajax_post_test", methods=['POST'])
	def ajax_post_test():
	if request.method == 'POST':
	print request.form["name"] + " " + request.form["city"]
	return "<p>Hello AJAX " + request.form["name"].upper() + " " + request.form["city"].upper() + " Test.</p>";

	@app.route("/")
	def main_page():
	return render_template("base.html", message="Hello World!")

	if __name__ == "__main__":
	app.debug = True
	app.run()