Python Flask JQuery instructions

Python Flask JQuery instructions
0. PrefaceRecently, for some reason, I have studied the Flask framework again and used blogs to organize relevant content. The Flask framework is slightly different from Apache + PHP. JS and CSS files in the Flask framework are stored in a relatively fixed location. Generally, it is located in the static folder (see Figure 1 directory structure ). This document uses a simple addition example to illustrate the usage of JQuery and Ajax in the Flask framework. This example runs in Raspberry Pi. Note that this example can also be run on windows and linux platforms. python has good cross-platform performance. [Code repository] The code repository is located in a Bitbucket. You can download a zip package or clone the Code through TortoiseHg. [Related blog] [1] python extension library installation use third-party image source [2] python Flask preschool [3] Front-end Learning -- HTML4 and HTML5 set page Language Character Set [4] Front-end Learning -- JQuery Ajax experience
1. Introduce JQueryThe jquery. js file must be stored in the static folder, and the path of the js file must be specified in the Code at the front end. These paths are "relative paths ". We strongly recommend that you save all files in UTF8 format to avoid Chinese garbled characters. [Directory structure] Fig 1 directory structure [static Directory] -- jqury. js templates templates --main.html [flask-jquery.py]
2. Simple Example[1] Front-end templates --main.html

 Flask JQuery
 <Script src = "{url_for ('static ', filename = 'jquery. js') }}"> </script> <script type = text/javascript> var $ SCRIPT_ROOT = {request. script_root | tojson | safe }}; </script> <script type = text/javascript> $ (function () {function submit_form (e) {$. getJSON ($ SCRIPT_ROOT + '/add', {a: $ ('input [name = "a"]'). val (), B: $ ('input [name = "B"] '). val (), now: new Date (). getTime ()}, function (data) {$ ('# result '). text (data. result) ;};}; // bind the click Event $ ('# calculate '). bind ('click', submit_form) ;}); </script>
    +=?
 

[Brief description] [1] The webpage code is UTF8. Note that the webpage file must also be saved in UTF8 format [2] <script src = "{url_for ('static ', filename = 'jquery. js') }}"> </script> load jquery in the static folder. js file [3] var $ SCRIPT_ROOT = {request. script_root | tojson | safe}; sorry, I have not understood the meaning for the moment. [4] now: new Date (). getTime () is a small trick to prevent browser caching. [2] The back-end part [flask-jquery.py]

#-*-Coding: UTF-8-*-from flask import Flask, jsonify, render_template, requestapp = Flask (_ name _) @ app. route ("/") def index (): # return render_template ("main.html") @ app. route ('/add') def add_numbers (): a = request. args. get ('A', 0, type = int) B = request. args. get ('B', 0, type = int) return jsonify (result = a + B) if _ name __= = "_ main _": app. run (host = "0.0.0.0", port = 8080, debug = True)

[Brief description] [1] The request. args. get ('A', 0, type = int) frontend submits the request by using the GET method and extracts parameters a and B in the URI. The value 0 in the middle is the default value of a and B. When the function fails to be executed, a or B can only be equal to 0. [2] app. run (host = "0.0.0.0", port = 8080, debug = True ). All IP addresses can be accessed. The port number is 8080 instead of the default port 80.
3 run in Raspberry Pi and transfer the folder FTP as shown in figure 1 to Raspberry Pi, execute the flask-jquery.py to get the python flask-jquery.py
Figure 2 front-end page
Figure 3 background debugging output