由于前端页面的需求不一样，有些页面使用的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是一个列表，可以直接进行处理