[PYTHON] SNS Flask (Ajax) made with Flask

TL;DL

Udemy attendance record for the following courses

Web application development course with Python + Flask! !! ~ Master Flask from 0 to create SNS ~ https://www.udemy.com/course/flaskpythonweb/

This article describes asynchronous communication with Ajax.

What is Ajax

-Ajax (Asynchronous JavaScript and XML) is a complex technology such as HTML, CSS, and Javascript. It allows web applications to display pages faster and to partially update the interface without reloading the entire page. → Use when you want to update the page content without screen transition.

Official
https://flask.palletsprojects.com/en/1.1.x/patterns/jquery/

-Use google's CDN to use jQuery. Ajax API https://developers.google.com/speed/libraries

3.x snippet:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

Code sample

Constitution sample ├── app.py └── templates 　　　└── index.html

app.py

from flask import Flask, request, render_template, jsonify

app = Flask(__name__)

@app.route('/')
def index():
    return render_template('index.html')

@app.route('/_add_numbers')
def add_numbers():

    # request.args.get(Query parameters,[Default value]、[Value type])
    a = request.args.get('a', 0, type=int)
    b = request.args.get('b', 0, type=int)

    # jsonify({key:value}):Convert the dictionary format data given as an argument to Json.
    #At that time, the header"content-type"To'application/json'Will convert to.
    return jsonify({'result': a+b})

if __name__ == '__main__':
    app.run(host='0.0.0.0', port=5000, debug=True)

index.html

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>
    $(function(){
        $('a#calculate').bind('click', function(){
            $.getJSON('/_add_numbers', {
                a: $('input[name="a"]').val(),
                b: $('input[name="b"]').val()
            }, function(data){
                $("#result").text(data.result)
            });
        });
    });

</script>
<h1>Jquery Sample</h1>
<p>
    <input type="text" size=5 name='a'>+
    <input type="text" size=5 name='b'>=
    <span id='result'>?</span>
</p>
<a href="#" id='calculate'>Calculate</a>

Process flow

1. 1. Execute the process of the root directory of app.py and display index.html on the screen.
2. 2. When the "calculate" link is pressed, geJSON processing is executed in response to the click event. Get the input value from the fields a and b by getJSON process and execute the process of "/ _add_numbers" root defined in "app.py". (= Event processing)
3. 3. In add_numbers processing, the values ​​of a and b are acquired from the query parameters by request, and the result is returned to index.html in JSON format using the jsonify module.
4. Pass the result of event processing to the event handler which is the third argument of getJSON (). (Data of "function (data)")
5. Reflect the result received from add_numbers in the text of the tag with id = result.

screen image

JQuery methods

reference: http://semooh.jp/jquery/

$('HTML element').bind( eventType [, eventData], handler(eventObject) ) 

$.getJSON( url [, data] [, success(data, textStatus, jqXHR)] )