Some situations require a refresh request and some resources, but do not want the entire page refresh, this time on the need to deal with ajax, that is a part of the page to trigger a refresh request and content
Prepare two views and html
from flask import Flask, render_template, request
app = Flask(__name__, static_url_path='')
@app.route('/')
def index():
return 'hello world!'
@app.route('/content/')
def text_content():
return render_template('content.html')
@app.route('/xhr/')
def text_xhr():
return render_template('xhr.html')
if __name__ == '__main__':
app.run(debug=True)
<h1>
This is, content.html
</ h1 of>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>AJAX</title>
</head>
<body>
<h1>这是xhr.html</h1>
<div id="msg"></div>
<button id="btnGet">获取内容</button>
</body>
</html>
Click for content using ajax when implemented, gets the contents of the content, and rendered to display inside div
Use js write request, data acquisition, data rendering operation
<Script>
function the getData () {
var XHR;
// instantiate an object browser
IF (window.ActiveXObject) {
XHR the ActiveXObject new new = ( 'Microsoft.XMLHTTP');
} the else IF (window.XMLHttpRequest) {
XHR = new new the XMLHttpRequest ();
} {the else
the throw new new Error ( 'current browser does not support Ajax');
}
// when a specified event associated state change xhr
xhr.onreadystatechange = function () {
IF (xhr.readyState. 4 && == xhr == 200 is .status) {
document.getElementById ( 'MSG') the innerHTML = xhr.responseText;.
}
};
// address initialization request manner
xhr.open ( 'GET', '/content/');
xhr.send (); // send a request
}
</ Script>
Look at the example of a calculator, multiply a function
from flask import Flask, render_template, request
app = Flask(__name__, static_url_path='')
@app.route('/calc/')
def calc():
a = int(request.args.get('num1', 0))
b = int(request.args.get('num2', 0))
result = a * b
return render_template('calc.html', result=result)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>计算</title>
</head>
<body>
<form action="#">
<input type="text" id="num1" name="num1">
*
<input type="text" id="num2" name="num2">
=
<input type="text" id="result" name="result" value="{{ result if result else '' }}">
<p>
<input type="submit" value="点击计算">
</p>
</form>
</body>
</html>
Since the submission of the request triggered, the entire page is refreshed, only to return to the results, there is no previous value, it will cause this situation, it is necessary to refresh the local
ajax realization
Modify and add html js script
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>计算</title>
</head>
<body>
<input type="text" id="num1" name="num1">*<input type="text" id="num2" name="num2">
=<input type="text" id="result" name="result">
<p><button id="btnCalc" onclick="do_calc()">点击进行ajax计算</button></p>
</body>
</html>
<script>
function do_calc() {
var xhr = new XMLHttpRequest();
var a = document.getElementById('num1').value;
var b = document.getElementById('num2').value;
xhr.onreadystatechange = function () {
if (xhr.readyState == 4 && xhr.status == 200) {
document.getElementById('result').value = xhr.responseText;
}
};
xhr.open('GET', '/ajax_calc/?a=' + a + '&b=' + b);
xhr.send();
}
</script>
Increasing a calculated view
from flask import Flask, render_template, request
app = Flask(__name__, static_url_path='')
@app.route('/ajax_calc/')
def ajax_calc():
a = int(request.args.get('a', 0))
b = int(request.args.get('b', 0))
result = a * b
return str(result)
@app.route('/calc/')
def calc():
a = int(request.args.get('num1', 0))
b = int(request.args.get('num2', 0))
result = a * b
return render_template('calc.html', result=result)
This will retain all data, only partial refresh