Flask--使用ajax进行局部刷新(GET,POST方法)
想实现网站只曝露index和login两个页面，让模板文件更为抽象、模块化，令其余url全部隐藏，使用ajax进行页面局部刷新即可实现。
1. ajax GET html：
<script type="text/javascript">
function GETInWebRefresh(url) {
$.ajax({
type: "GET",
url: url,
dataType: "html", // 期待后端返回数据的类型
success: function (data) {//返回数据根据结果进行相应的处理
$("#content").html(data);
},
error: function () {
$("#content").html("获取数据失败！");
}
});
}
</script>
可实现页面内局部刷新，获取html数据后，替换指定div，这里是令当前页面的id=content的div代码块刷新为指定的url返回的html代码块。
<a href="javascript:void(0);" onclick="GETInWebRefresh('/dataQuery/')"><i class="fa fa-table fa-fw"></i> Table</a>
在按钮中设置href="javascript:void(0);"，保证url不会变动，使用onclick进行ajax调用，onclick="GETInWebRefresh('/dataQuery/')"指定获取的页面（在view中配置/dataQuery/的路由和函数）。
view文件配置路由和函数
@app.route('/dataQuery/', methods=['GET'])
def dataQuery():
return render_template('dataQuery.html')
如果是需要提交表单等POST操作，则需要调整一些项目代码细节：
2. ajax POST html：
<script type="text/javascript">
function POSTInWebRefresh(url) {
data = $('#form').serialize(); // 将id=form的表单数据序列化
$.ajax({
type: "POST",
url: url,
data: JSON.stringify(data), // 将data转化为字符串
contentType: 'application/json; charset=UTF-8', // 指定contentType
dataType: "html", // 注意：这里是指希望服务端返回的数据类型
success: function (data) { // 返回数据根据结果进行相应的处理
$("#table").html(data);
},
error: function () {
$("#table").html("获取数据失败！");
}
});
}
</script>
可实现ajax POST提交表单form数据，处理成json字符串后，传到指定url去处理，获取返回的html数据后，替换指定div，这里是令当前页面的id=table的div代码块刷新为指定的url返回的html代码块。
页面设置如下一个form，form设置为methord="post" id="form"，
注意，ajax POST提交表单不使用button，而是a：<a href="javascript:void(0);" onclick="POSTInWebRefresh('/QueryTable/')" class="btn btn-primary">Submit</a>
因为如果使用button的话，会将post提交到当前页的url去（比如index），而不是你想要的指定url模块，导致局部刷新失败。
<form role="form" method="post" id="form">
<div class="form-group col-lg-2">
<label>Checkboxes</label>
<div class="checkbox">
<label>
<input type="checkbox" name="Checkboxes" id="Checkboxes1" value="Checkbox1">Checkbox 1
</label>
</div>
<div class="checkbox">
<label>
<input type="checkbox" name="Checkboxes" id="Checkboxes2" value="Checkbox2">Checkbox 2
</label>
</div>
</div>
<div class="form-group col-lg-2">
<label>Radio Buttons</label>
<div class="radio">
<label>
<input type="radio" name="optionsRadios" id="optionsRadios1"
value="option1" checked>Radio 1
</label>
</div>
<div class="radio">
<label>
<input type="radio" name="optionsRadios" id="optionsRadios2"
value="option2">Radio 2
</label>
</div>
</div>
<div class="form-group col-lg-4">
<label>Selects</label>
<select class="form-control" name="SingleSelect">
<option>1</option>
<option>2</option>
<option>3</option>
</select>
</div>
<div class="form-group col-lg-4">
<label>Multiple Selects</label>
<select multiple class="form-control" name="MultiSelect">
<option>1</option>
<option>2</option>
<option>3</option>
</select>
</div>
<!--button type="submit" class="btn btn-default">Submit</button not work-->
<a href="javascript:void(0);" onclick="POSTInWebRefresh('/QueryTable/')" class="btn btn-outline btn-primary">Submit</a>
<button type="reset" class="btn btn-outline btn-primary">Reset</button>
</form>
view文件配置路由和函数
“/QueryTable/”路由配置为仅接收POST，函数中判断如果请求是POST方法，使用request.get_json()接收前端发过来的data，后台能够看到，是一个字符串，格式跟GET方法获得的arg一样：Checkboxes=Checkbox2&Checkboxes=Checkbox3&optionsRadios=option3&SingleSelect=3&MultiSelect=4&MultiSelect=5
在函数进行处理后(比如解析data后进行数据库查询)，返回渲染指定模板，这里是假定查询数据库后，返回dataTables代码块、查询结果的表头和数值（此处例子给的是列表，如果返回的是字典类型数据，模板文件中也要做对应修改）。
备注：如果是普通POST方法传递表单，就使用request.form获取传过来的数据，
再按照表单中的单个条件控件名（request.form.get('name')）
还是多条件控件名(request.form.getlist('name'))分别获取对应的值。
form = request.form
print(form)
print(form.getlist('Checkboxes'))
print(form.get('optionsRadios'))
print(form.get('SingleSelect'))
print(form.getlist('MultiSelect'))
@app.route('/QueryTable/', methods=['POST'])
def QueryTable():
if request.method == "POST":
print("我是QueryTable")
data = request.get_json()
print(type(data))
print(data)
sql_head = ["table-head"]
sql_body = [["table-value1"],
["table-value2"]]
return render_template('QueryTable.html', table_head=sql_head, table_body=sql_body)
return render_template('QueryTable.html')
而QueryTable模板文件中，就只包含dataTables部分。
{% block table %}
{% if table_head %}
{% if table_body %}
<!-- Page-Level Plugin CSS - Tables -->
<link href="{{ url_for('static', filename='css/plugins/dataTables/dataTables.bootstrap.css') }}" rel="stylesheet">
<!-- Page-Level Plugin Scripts - Tables -->
<script src="{{ url_for('static', filename='js/plugins/dataTables/jquery.dataTables.js') }}"></script>
<script src="{{ url_for('static', filename='js/plugins/dataTables/dataTables.bootstrap.js') }}"></script>
<!-- Page-Level Demo Scripts - Tables - Use for reference -->
<script>
$(document).ready(function () {
$('#dataTables-example').dataTable();
});
</script>
<div class="row">
<div class="col-lg-12">
<div class="panel panel-default">
<div class="panel-heading">
<!-- DataTables Advanced Tables -->
DataTable
</div>
<!-- /.panel-heading -->
<div class="panel-body">
<div class="table-responsive">
<table class="table table-striped table-bordered table-hover"
id="dataTables-example">
<thead>
<tr>
{% for head in table_head %}
<th>{{ head }}</th>
{% endfor %}
</tr>
</thead>
<tbody>
{% for line in table_body %}
<tr>
{% for value in line %}
<td>{{ value }}</td>
{% endfor %}
</tr>
{% endfor %}
</tbody>
</table>
</div>
<!-- /.table-responsive -->
</div>
<!-- /.panel-body -->
</div>
<!-- /.panel -->
</div>
<!-- /.col-lg-12 -->
</div>
<!-- /.row -->
{% endif %}
{% endif %}
{% endblock table %}
以上。
上一篇： ajax简单使用