Flask Ajax Demo

来源：互联网发布：300451创业软件股吧编辑：程序博客网时间：2024/06/01 07:12

Python Code:

from flask import Flask, jsonify, request, render_templateapp = Flask( __name__ )@app.route( "/", methods = [ "POST", "GET" ] )def index():    if request.method == "POST":        first_name = request.form.get( "first_name", "null" )        last_name = request.form.get( "last_name", "null" )        return jsonify( name = first_name + " " + last_name )    else:        return render_template( "index.html" )if __name__ == "__main__":    app.run(        port = 7777,        debug = True    )

html code:

<html>    <head>        <script type=text/javascript src="{{  url_for('static', filename='jquery.min.js') }}"></script>        <script type="text/javascript">            var $SCRIPT_ROOT = {{request.script_root|tojson|safe}};            function ajaxForm() {                $.ajax( {                    type : "POST",                    url : $SCRIPT_ROOT,                    dataType : "json",                    data : {                        "first_name" : $( "input[name=first_name]" ).val(),                        "last_name" : $( "input[name=last_name]" ).val(),                     },                    error: function( XMLResponse ) {                        alert( XMLResponse.responseText )                    },                    success : function ( data, textStatus ) {                        $( "#name" ).text( data.name );                                  }                } );                return false;                        }        </script>    </head>    <body>        <form action="" method="post" onSubmit="return ajaxForm()">            <input name="first_name" type="text" />            <input name="last_name" type="text" />            <input type="submit" />                    </form>        <p>Hello: <span id="name"></span></p>    </body></html>

result:

1 2