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.
-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>
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>
screen image
reference: http://semooh.jp/jquery/
$('HTML element').bind( eventType [, eventData], handler(eventObject) )
Contents | Explanation |
---|---|
.bind() | Associate the subsequent processing with the HTML element |
eventType | A DOM event that is the key to invoking the process. You can specify multiple items separated by commas.'click''submit'Such |
eventData | Any. Data to be passed to eventHandler can be defined. (Function OK) |
handler(eventObject) | Define the process to be executed when an event with a low proposal occurs in eventType. If eventData is defined, it can be received as an argument of handler.(The name used for the argument is arbitrary) |
$.getJSON( url [, data] [, success(data, textStatus, jqXHR)] )
Contents | Explanation |
---|---|
url | Specify the request destination URL. |
data | Specify the data to send to the server. URL-encoded before sending to the server. |
callback | A callback function that will be executed if the request is sent successfully. The value returned from the request destination URL can be received as an argument of the function. |
Recommended Posts