由于前端页面的需求不一样，有些页面使用的layui的数据表格监听传递数据，有些则是使用分页模块自行编写的ajax提交方式，前者通过重载表格种的where条件添加参数来提交到后端进行数据的重新渲染，后者根据ajax写的方式有两种接收方法，真是实践了一下，写法稍有不通，后面传递的参数名也是不一样的
1.数据表格的重载方式，我的代码如下，主要是接收id复选框的值
htmL代码：
<div class="layui-inline" style="width: 300px;">
<select name="id" id="id" lay-filter="id" multiple="multiple">
{% for d in cas %}
<option value="{{ d }}">{{ cas[d] }}</option>
{% endfor %}
</select>
</div>js代码
var active = {
reload: function(){
var id = $("#id").val();
var timeperiod = $("#timeperiod").val()
table.reload('pyReload', {
page: {
curr: 1
}
,where: {
cid: cid,
timeperiod: timeperiod
}
});
}
};复选框不选直接获取id的val()值为空时传递的值是null，有点选则是列表形式的，例如
["1","2","3"]
在flask接收的时候我们需要接收的方式如下，需要使用getlist方法接收所有复选框所有参数
id = request.args.getlist('cid[]')这样接收id就是一个列表，但是不知道为什么list里面总是有重复的值，例如
["3","4","5","5"]
后来排查不是接口和下拉复选框的问题，问题出在where下面的重载条件，后面也具体查不出问题，只有用下面的技巧解决临时解决了，这样列表就变为一个字符串传递到后端
var active = {
reload: function(){
var id = $("#id").val();
if(id == null){
cid = '';
}else{
cid = id.join(",");
}
var timeperiod = $("#timeperiod").val()
table.reload('pyReload', {
page: {
curr: 1
}
,where: {
cid: cid,
timeperiod: timeperiod
}
});
}
};然后我接口改为(详细代码就不贴出来了，主要地方)：
cid = request.args.get('cid')
if cid is None:
cids = list(g.cas.keys())[:1]
elif cid == '':
cids = list(g.cas.keys())
else:
cids = [int(p) for p in cid.split(",")]接收参数由原本的getlist方法改为普通的get方法
我的复选框使用的扩展插件下拉复选框，扩展模块可以在layui第三方组件平台查看https://fly.layui.com/extend/multiSelect/
2.模板引擎种自定义ajax的两种传参方式写法不一样然后后端接收到的参数名和值也不一样
1）我们直接来看ajax代码，我这里接收sid复选框的值
form.on('submit(alert_btn)', function(data){
similaritys = $("#similaritys").val();
sid = $("#sid").val()
timeperiod = $("#timeperiod").val();
load_data(1, similaritys, sid, timeperiod);
});表单监听提交获取字段的值，原本可以直接通过参数data获取，但是咱们使用的下拉复选框是有点问题，只能通过选择器来获取到真实的值，可能是由于复选框隐藏添加的dom在表单外面的原因吧
load_data函数如下：
function load_data(curr, similaritys, sid){
$.ajax({
url:'{{ url_for("fp.ajaxAlert" ) }}?page='+curr+'&limit={{ page_limit }}&similarity='+similaritys+'&sid='+sid+'&timeperiod='+timeperiod,
type: 'GET',
dataType: 'json',
timeout: 3000,
beforeSend: function(){
var index = layer.load();
},
error: function(){
},
success: function(json){
layer.close(layer.index);
//console.log(json);
if(json.code == 0){
json.b = b;
var getTpl = show.innerHTML
,view = document.getElementById('view');
laytpl(getTpl).render(json, function(html){
view.innerHTML = html;
element.render('similarity');
});
laypage.render({
elem: 'pages'
,count: json.count
,curr: curr
,layout: ['count', 'prev', 'page', 'next', 'skip']
,limit: "{{ page_limit }}"
,jump: function(obj, first){
if(!first){
load_data(obj.curr, similaritys, sid, timeperiod);
}
}
});
}else{
layer.alert('无法获取数据！');
}
}
});
}咱们是使用的get方法提交表单，直接将数据值拼接到URL中，在flask接口接收的方法是
sid = request.args.get('sid')
if not sid or sid == "null":
surs = list(g.surs)
else:
surs = [int(p) for p in sid.split(",")]可以看到和上面数据表格重载的接收方式是一样的
2）另一种ajax的写法我们来看看有何不同，虽然是POST方法，但是我相信改成GET方式还是类似的，我们这里接收condition的复选框的值
form.on('submit(retrive_btn)', function(data){
var condition = $("#condition").val();
var similaritys = $("#similaritys").val();
var timeperiod = $("#timeperiod").val();
$.ajax({
url: '{{ url_for("fp.ajaxComparison") }}',
data: {'condition':condition, 'timeperiod':timeperiod, 'similaritys':similaritys},
type: 'POST',
dataType: 'json',
timeout: 5000,
beforeSend: function(){
var index = layer.load();
},
error: function(){
layer.close(layer.index);
},
success: function(json){
layer.close(layer.index);
//console.log(json);
if(json.code == 0){
laypage.render({
elem: 'pages'
,count: json.data.length
,limit: "{{ page_limit }}"
,layout: ['count', 'prev', 'page', 'next', 'skip']
,jump: function(obj){
...something
}
});
}
}
});
});接收的方法和我们之前的静态表格接收异常的接收方式一样，但是这个确是可以正常处理的，我们来看看接口的接收方法
condition = request.form.getlist('condition[]')
condition_list = []
if not condition:
for p in g.cameras:
condition_list.append({"cid": str(p)+'@'+g.session_id})
else:
for p in condition:
condition_list.append({"cid": str(p)+'@'+g.session_id})
datas2["retrieval"]["list"] = condition_list我们可以猜出condition是一个列表，可以直接进行处理