由于前端页面的需求不一样，有些页面使用的layui的数据表格监听传递数据，有些则是使用分页模块自行编写的ajax提交方式，前者通过重载表格种的where条件添加参数来提交到后端进行数据的重新渲染，后者根据ajax写的方式有两种接收方法，真是实践了一下，写法稍有不通，后面传递的参数名也是不一样的

1.数据表格的重载方式，我的代码如下，主要是接收id复选框的值

htmL代码：

01.
<div class="layui-inline" style="width: 300px;">
02.
    <select name="id" id="id" lay-filter="id" multiple="multiple">
03.
    {% for d in cas %}
04.
        <option value="{{ d }}">{{ cas[d] }}</option>
05.
    {% endfor %}
06.
    </select>
07.
</div>

js代码

01.
var active = {
02.
    reload: function(){
03.
        var id = $("#id").val();
04.
        var timeperiod = $("#timeperiod").val()
05.
        table.reload('pyReload', {
06.
            page: {
07.
                curr: 1
08.
            }
09.
            ,where: {
10.
                cid: cid,
11.
                timeperiod: timeperiod
12.
            }
13.
        });
14.
    }
15.
};

复选框不选直接获取id的val()值为空时传递的值是null，有点选则是列表形式的，例如

01.
["1","2","3"]

在flask接收的时候我们需要接收的方式如下，需要使用getlist方法接收所有复选框所有参数

01.
id = request.args.getlist('cid[]')

这样接收id就是一个列表，但是不知道为什么list里面总是有重复的值，例如

01.
["3","4","5","5"]

后来排查不是接口和下拉复选框的问题，问题出在where下面的重载条件，后面也具体查不出问题，只有用下面的技巧解决临时解决了，这样列表就变为一个字符串传递到后端

01.
var active = {
02.
    reload: function(){
03.
        var id = $("#id").val();
04.
        if(id == null){
05.
            cid = '';
06.
        }else{
07.
            cid = id.join(",");
08.
        }
09.
        var timeperiod = $("#timeperiod").val()
10.
        table.reload('pyReload', {
11.
            page: {
12.
                curr: 1
13.
            }
14.
            ,where: {
15.
                cid: cid,
16.
                timeperiod: timeperiod
17.
            }
18.
        });
19.
    }
20.
};

然后我接口改为(详细代码就不贴出来了，主要地方)：

01.
cid = request.args.get('cid')
02.
 
03.
if cid is None:
04.
    cids = list(g.cas.keys())[:1]
05.
elif cid == '':
06.
    cids = list(g.cas.keys())
07.
else:
08.
    cids = [int(p) for p in cid.split(",")]

接收参数由原本的getlist方法改为普通的get方法

我的复选框使用的扩展插件下拉复选框，扩展模块可以在layui第三方组件平台查看https://fly.layui.com/extend/multiSelect/

2.模板引擎种自定义ajax的两种传参方式写法不一样然后后端接收到的参数名和值也不一样

1）我们直接来看ajax代码，我这里接收sid复选框的值

01.
form.on('submit(alert_btn)', function(data){
02.
    similaritys = $("#similaritys").val();
03.
    sid = $("#sid").val()
04.
    timeperiod = $("#timeperiod").val();
05.
    load_data(1, similaritys, sid, timeperiod);
06.
});

表单监听提交获取字段的值，原本可以直接通过参数data获取，但是咱们使用的下拉复选框是有点问题，只能通过选择器来获取到真实的值，可能是由于复选框隐藏添加的dom在表单外面的原因吧

load_data函数如下：

01.
function load_data(curr, similaritys, sid){
02.
        $.ajax({
03.
            url:'{{ url_for("fp.ajaxAlert" ) }}?page='+curr+'&limit={{ page_limit }}&similarity='+similaritys+'&sid='+sid+'&timeperiod='+timeperiod,  
04.
            type: 'GET',
05.
  	    dataType: 'json',
06.
            timeout: 3000,
07.
  	        beforeSend: function(){
08.
                var index = layer.load();
09.
	        },
10.
  	        error: function(){
11.
  	        },
12.
  	        success: function(json){
13.
                layer.close(layer.index);
14.
                //console.log(json);
15.
                if(json.code == 0){
16.
                    json.b = b;
17.
                    var getTpl = show.innerHTML
18.
                    ,view = document.getElementById('view');
19.
                    laytpl(getTpl).render(json, function(html){
20.
                        view.innerHTML = html;
21.
                        element.render('similarity');
22.
                    });
23.
                    laypage.render({
24.
                        elem: 'pages'
25.
                        ,count: json.count
26.
                        ,curr: curr
27.
                        ,layout: ['count', 'prev', 'page', 'next', 'skip']
28.
                        ,limit: "{{ page_limit }}"
29.
                        ,jump: function(obj, first){
30.
                            if(!first){
31.
                                load_data(obj.curr, similaritys, sid, timeperiod);
32.
                            }
33.
                        }
34.
                    });
35.
                }else{
36.
                    layer.alert('无法获取数据！');
37.
                }
38.
            }
39.
        });
40.
    }

咱们是使用的get方法提交表单，直接将数据值拼接到URL中，在flask接口接收的方法是

01.
sid = request.args.get('sid')
02.
 
03.
if not sid or sid == "null":
04.
    surs = list(g.surs) 
05.
else:
06.
    surs = [int(p) for p in sid.split(",")]

可以看到和上面数据表格重载的接收方式是一样的

2）另一种ajax的写法我们来看看有何不同，虽然是POST方法，但是我相信改成GET方式还是类似的，我们这里接收condition的复选框的值

01.
    form.on('submit(retrive_btn)', function(data){
02.
        var condition = $("#condition").val();
03.
        var similaritys = $("#similaritys").val();
04.
        var timeperiod = $("#timeperiod").val();
05.
        $.ajax({
06.
            url: '{{ url_for("fp.ajaxComparison") }}',
07.
            data: {'condition':condition, 'timeperiod':timeperiod, 'similaritys':similaritys},
08.
            type: 'POST',
09.
  	    dataType: 'json',
10.
            timeout: 5000,
11.
            beforeSend: function(){
12.
                var index = layer.load();
13.
            },
14.
            error: function(){
15.
                layer.close(layer.index);
16.
            },
17.
            success: function(json){
18.
                layer.close(layer.index);
19.
                //console.log(json);
20.
                if(json.code == 0){
21.
                    laypage.render({
22.
                        elem: 'pages'
23.
                        ,count: json.data.length
24.
                        ,limit: "{{ page_limit }}"
25.
                        ,layout: ['count', 'prev', 'page', 'next', 'skip']
26.
                        ,jump: function(obj){
27.
                            ...something
28.
                        }
29.
                    });                
30.
                }
31.
            } 
32.
        });
33.
    });

接收的方法和我们之前的静态表格接收异常的接收方式一样，但是这个确是可以正常处理的，我们来看看接口的接收方法

01.
condition = request.form.getlist('condition[]')
02.
condition_list = []
03.
    if not condition:
04.
        for p in g.cameras:
05.
            condition_list.append({"cid": str(p)+'@'+g.session_id})  
06.
    else:
07.
        for p in condition:
08.
            condition_list.append({"cid": str(p)+'@'+g.session_id})
09.
            datas2["retrieval"]["list"] = condition_list

我们可以猜出condition是一个列表，可以直接进行处理