spring boot + freemarker 框架开发，前后端数据交互方式总结

1、前端是Get请求，后端直接返回数据列表
前端js函数：

    function getBtnclick() {
    var ss="";
    $("input[name='selcolTypeChild']").each(function () {
        ss += $(this).val().toString() + ",";
    })
    ss = ss.substr(0,ss.length-1)
    $.ajax({
        type: "GET",
        datatype: "JSON",
        url: "/one_child?datewhere=" +  ss,
        success: function (mUvList) {
            if (mUvList != null) {
                var datalist = JSON.parse(JSON.stringify(mUvList));
                var datax = []
                var datay = []
                for(var i=0;i<datalist.length;i++)
                {
                    datax.push(datalist[i].date_time)
                    datay.push(datalist[i].count)
                }
                DrawBasiclineCharts(datax, datay, "chartmain")
            }
        },
        error: function (selcolumnValuelist) {
            alert("请求超时")
        }
    });
}

controller中：

@ResponseBody
@GetMapping("/one_child")
public List<MeceUv> getData(@RequestParam("datewhere") String datewhere) {
    String[] dateTime = datewhere.split(",");
    List<MeceUv> mUvList = new ArrayList<>();
    mUvList = meceService.GetUVRate(dateTime[0], dateTime[1]);
    return mUvList;
}

2、crontroller中返回ModelAndView
crontroller：

@GetMapping("/wmzy_dattareport_init_oneone")
public ModelAndView initWmzyIndexOne(ModelAndView model) {
    ModelAndView mod = new ModelAndView();
    int ucount = wmzyReportDataSevInterface.GetTotalRegUser(11100);
    model.addObject("utextcount", ucount);
    model.addObject("textTitle", "累计注册用户");
    model.addObject("textNotice", "累计注册用户");
    model.setViewName("/wmzy_datareport/textshow");
    return model;
}

前端：
ModelAndView 返回到前端后，前端将modelandview的内容添加到div控件中

$.ajax({
    type: "GET",
    datatype: "JSON",
    url: "/wmzy_dattareport_init_oneone",
    success: function (model) {
        $("#tdone_one").empty()
        $("#tdone_one").append(model)
    },
    error: function (selcolumnValuelist) {
        alert("请求超时")
    }
});

3、 post请求
前端：
定义iframe盛放后端返回的结果页面

<div><iframe id="usertabframe" name="usertabframe" style="background-color: white;height:600px" onload="changeFrameHeight()" ></iframe>
</div>

form表单中设置target属性

   <form method="POST" action="guestData" accept-charset="UTF-8" target="usertabframe">
          ...
        <button id="getdatabtn" type="submit" width="120" >获取数据</button>
    </form>

Crontroller：

@PostMapping("/guestData")
public ModelAndView getGuestData(@RequestParam("selcolTypeChildw") String strselcheck, ModelAndView attr) {

    String strselid = "1003";
    String strSelCheck = strselcheck;
    //分析选中字段
    String sqlWhere = "";
    if (strSelCheck != null) {
        Map<String, List<String>> msl = new HashMap<String, List<String>>();
        msl = ssiData.GetSelColWhere(strSelCheck);
        sqlWhere = ssiData.GetWhereStatment(msl);
    }
    //根据选中的表获取数据
    if (strselid.equals("1003")) {
        if (strSelCheck != null || !sqlWhere.isEmpty()) {
            String[] datelist = reportDataSevInterface.GetRegisterDate(strSelCheck);
            List<UserRegisterCount> ulist = reportDataSevInterface.GetUserInfoDataBySta(datelist[0], datelist[1], sqlWhere);
            attr.addObject("userlist", ulist);
        } else {
            List<UserRegisterCount> userlistt = new ArrayList<>();
            attr.addObject("userlist", userlistt);
        }
    }
    attr.setViewName("./wmzy/wmzy_tableData");
    return attr;
}

4、 freemarker 模板后台直接赋值
前端：

<select name="tablesName" id="tablesName" class="form-control" onchange="BpSelChange()">
    <option value="111">--请选择--</option>
    <#if rolelist?? && (rolelist?size > 0) >
        <#list rolelist as allt>
    <option value="${(allt.role_id)?c}"
    <#if ( "${selid}" == "${allt.role_id?c}")>selected="selected"</#if>>
        ${(allt.role_name)!}</option>
        </#list>
    </#if>
</select>

Crontroller：

   @PostMapping(value="login")
    public ModelAndView login(@RequestParam("username")String username, @RequestParam("password")String pwd, ModelAndView mod){

        if(pwd.equals("123456")){
            if(username.equals("guest"))
            {
                mod.addObject("admin",username); 
                List<Role> rlist = new ArrayList<>();
                Role role = new Role();
                role.setRole_id(1);
                role.setRole_name("学生");
                rlist.add(role);
                Role role0= new Role();
                role0.setRole_id(0);
                role0.setRole_name("未知");
                rlist.add(role0);
                Role role2 = new Role();
                role2.setRole_id(2);
                role2.setRole_name("家长");
                rlist.add(role2);
                Role role3 = new Role();
                role3.setRole_id(3);
                role3.setRole_name("老师");
                rlist.add(role3);
                mod.addObject("rolelist",rlist); 
                mod.setViewName("/index");
            }
        }
        return mod;
    }

5、表单提交
前端：

  <form method="POST" action="login" accept-charset="UTF-8">
            <div id="login">
                <table>
                    <tr height="60">
                        <td class="text-dark">用户名：</td>
                        <td><input width="150" name="username" class="form-control" type="text" required></td>
                    </tr>
                    <tr height="60">
                        <td class="text-dark">密码：</td>
                        <td><input width="150" name="password" class="form-control" type="password" required></td>
                    </tr>
                    <tr height="60">
                        <td></td>
                        <td>
                            <button type="submit" class="btn btn-primary btn-block">登陆</button>
                        </td>
                        <td></td>
                    </tr>
                </table>
            </div>
        </form>

crontroller：

@PostMapping(value="login")
public ModelAndView login(@RequestParam("username")String username, @RequestParam("password")String pwd, ModelAndView mod){

    if(pwd.equals("123456")){
        if(username.equals("guest"))
        {
            mod.addObject("admin",username);
        }
    }
    return mod;
}