表单提交后页面不跳转,将后台返回的数据传到本页面
有时我们需要在本页面提交表单,比如往数据库添加数据,但是并不希望他跳转页面,而是留在本页面,那我们应该怎么做呢
如果用平常的方法实现起来挺复杂,有一种方法是调用后台的接口添加数据成功后,接口返回当前页面,但是那样太不符合标准了,不利于前后端分离和接口复用
所以,我们可以使用jQuery的 ajaxSubmit 来进行表单的提交.
先自己下载jquery-form.js,给你们链接https://pan.baidu.com/s/1-IfvBikx4DXQLTJYkoTzDA
首先来看一下我后台的接口
@PostMapping(value = "/order/add") @ResponseBody public String addOrder(@RequestParam("username") String name, @RequestParam("inttime")String inttime, @RequestParam("outtime")String outtime,@RequestParam("roomtype") String roomtype ,@RequestParam("monney") int monney,@RequestParam("roomNum") String roomNum){ 此处省略 if(成功) return "1"; else return "0"; }
这是一个增加订单的接口
前台通过表单提交
<button type="button" class="btn btn-primary" onclick="addOrder()"> 确认添加 </button>
下面是addOrder方法
function addOrder() { $('#orderAddForm').ajaxSubmit( { url : "/order/add", success: function(data) { if(data=="1"){ alert("添加成功") } else{ alert("添加失败") } }, }); $('#myModal').modal("hide") return false; }
通过这种方法就可以实现提交表单后不跳转页面
留在本页面,并获取返回的值