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 %}

以上。