最近需要实现一个表单post提交方式,且不用ajax,又要携带自定义参数,每次的参数还不一样,经过一轮思考后,实现出来了,现在开始上代码
项目前端使用的layui,html5,后端使用的springboot2.X
首先上前端关键代码
<form class="form-horizontal" id="form" method="post" οnsubmit="return false" enctype="multipart/form-data"> <input id="token" name="token" hidden> 。。。。省略非关键的html <button class="layui-btn layui-btn-warm" style="margin-left: 10px!important;" id="downTemp3">导出word文档</button> </form>
js部分
//导出word信息 $("#downTemp3").on("click",function () { //尝试采用自定义输入框的方式增加数据 let checkStatus = table.checkStatus('stuList'); //idTest 即为基础参数 id 对应的值 if(checkStatus.data.length===0){ layer.msg('你还没有选择记录'); return; }else if(checkStatus.data.length>1){ layer.msg('一次只能导出一条记录到word文档'); return; }else{ console.log('chosenObj',chosenObj); $("#token").val(localStorage.getItem("token"));//前端登录页面存储的token let formSel=$("#form"); formSel.attr("action","/files/downloadWord2"); formSel.attr("onsubmit", "return true"); //以下部分为自定义参数的关键部分,虚拟出一个输入框,然后,赋值
//导出word信息 $("#downTemp3").on("click",function () { //尝试采用自定义输入框的方式增加数据 let checkStatus = table.checkStatus('stuList'); //idTest 即为基础参数 id 对应的值 if(checkStatus.data.length===0){ layer.msg('你还没有选择记录'); return; }else if(checkStatus.data.length>1){ layer.msg('一次只能导出一条记录到word文档'); return; }else{ console.log('chosenObj',chosenObj); $("#token").val(localStorage.getItem("token"));//前端页面保存的token let formSel=$("#form"); formSel.attr("action","/files/downloadWord2"); formSel.attr("onsubmit", "return true"); //虚拟文本输入框,值是chosenObj,这里可以随便发挥,这个值将会传到后端 formSel.append('<input type="hidden" name="content" value="' + chosenObj + '" />'); formSel.submit(); formSel.attr("onsubmit", "return false"); } });
//后端代码实现
//下载word模板 @PostMapping("/downloadWord2") public void downloadWord2(HttpServletRequest req,HttpServletResponse resp){ try{ String content=req.getParameter("content"); if(StringUtils.isNotBlank(content)){ System.out.println(content); }else{ System.out.println("未输入用户参数"); } }catch (Exception ex){ ex.printStackTrace(); } }