Flask Ajax Demo

最新推荐文章于 2022-11-11 22:20:04 发布

一刀不二

最新推荐文章于 2022-11-11 22:20:04 发布

阅读量5.7k

点赞数 1

分类专栏： [Python] [Python Web Framework]

本文链接：https://blog.csdn.net/pandora_madara/article/details/46293903

版权

[Python] 同时被 2 个专栏收录

33 篇文章 0 订阅

订阅专栏

[Python Web Framework]

2 篇文章 0 订阅

订阅专栏

Python Code:

from flask import Flask, jsonify, request, render_template

app = 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: