Form表单的二种提交方式(Spring后台controller处理)
2017-08-18 10:01
671 查看
这里总结下form表单的二种常见的提交方式,所用的模块为前端jquery+thymeleaf; 后台Springboot。
第一种:提交跳转型:
顾名思义,form一旦submit,默认提交表单并跳转
thymeleaf页面:
上边注意的是:
th:action是跳转的url;
th:object是后台封装的form对象
点击submit后,后台是这个样子的:
1、封装的form对象
2、controller
第二种:ajax异步提交form表单,前端控制下一步走向型
这种是我常用的,因为我的需求有时候需要提交一个form但并非跳转页面,而是根据后台返回的消息去决定下一步。这种我用的ajax异步处理
前端thymeleaf页面form部分:
这里我把需要提交的数据写在了form下的一个table里(因为我要展示这些数据,同时还可以以form的形式提交),这里我把需要提交的数据映射到了updatePoints对象,该对象在后台是这个样子:
注意,Form对应PointForm,Form里的updatePoints对应对象的updatePoints
updatePoints是一个泛型list,list里的对象为EcommerceNonDetailOrder,
ok,Form和后台Form对象映射起来后,我需要考虑如何将Form提交到后台而且不跳转,因为页面里没有binding,这里就不能用@ModelAtrribute去捕获form表单了。
首先表单提交放到ajax里去完成:
1、
这里注意的是将form序列化,serializeArray()是关键。并将表单post到batchUpdate url下。下边来看下后台如何捕获
2、
很简单了,直接在方法参数里命名一个PointForm,这样提交过来的Form就会封装到这个对象中了
这里前端form的序列化和后台的捕获是关键
over
第一种:提交跳转型:
顾名思义,form一旦submit,默认提交表单并跳转
thymeleaf页面:
<!DOCTYPE HTML> <html xmlns:th="http://www.thymeleaf.org"> <head> <title>Getting Started: Handling Form Submission</title> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> </head> <body> <h1>Form</h1> <form action="#" th:action="@{/greeting}" th:object="${greeting}" method="post"> <p>Id: <input type="text" th:field="*{id}" /></p> <p>Message: <input type="text" th:field="*{content}" /></p> <p><input type="submit" value="Submit" /> <input type="reset" value="Reset" /></p> </form> </body> </html>
上边注意的是:
th:action是跳转的url;
th:object是后台封装的form对象
点击submit后,后台是这个样子的:
1、封装的form对象
package hello; public class Greeting { private long id; private String content; public long getId() { return id; } public void setId(long id) { this.id = id; } public String getContent() { return content; } public void setContent(String content) { this.content = content; } }
2、controller
package hello; import org.springframework.stereotype.Controller; import org.springframework.ui.Model; import org.springframework.web.bind.annotation.GetMapping; import org.springframework.web.bind.annotation.ModelAttribute; import org.springframework.web.bind.annotation.PostMapping; @Controller public class GreetingController { //客户get请求一个form页面时,返回的model里有一个空Greeting实例,去binding页面的th:object,没有bingding则报错 @GetMapping("/greeting") public String greetingForm(Model model) { model.addAttribute("greeting", new Greeting()); return "greeting"; //返回表单输入页 } //form提交映射到此处,@ModelAttribute映射页面的th:object,从而将form捕获并封装成Greeting对象 @PostMapping("/greeting") public String greetingSubmit(@ModelAttribute Greeting greeting) { return "result"; //提交表单后跳转的页面 } }
第二种:ajax异步提交form表单,前端控制下一步走向型
这种是我常用的,因为我的需求有时候需要提交一个form但并非跳转页面,而是根据后台返回的消息去决定下一步。这种我用的ajax异步处理
前端thymeleaf页面form部分:
这里我把需要提交的数据写在了form下的一个table里(因为我要展示这些数据,同时还可以以form的形式提交),这里我把需要提交的数据映射到了updatePoints对象,该对象在后台是这个样子:
注意,Form对应PointForm,Form里的updatePoints对应对象的updatePoints
package com.cloudhealth.ecommerce.entity; import java.util.List; public class PointForm { private List<EcommerceNonDetailOrder> updatePoints; public List<EcommerceNonDetailOrder> getUpdatePoints() { return updatePoints; } public void setUpdatePoints(List<EcommerceNonDetailOrder> updatePoints) { this.updatePoints = updatePoints; } }
updatePoints是一个泛型list,list里的对象为EcommerceNonDetailOrder,
package com.cloudhealth.ecommerce.entity; import java.io.Serializable; import java.util.Date; import javax.persistence.Entity; import javax.persistence.GeneratedValue; import javax.persistence.GenerationType; import javax.persistence.Id; @Entity public class EcommerceNonDetailOrder implements Serializable { /** * */ private static final long serialVersionUID = 1L; private int id; private Long phone; private String inviteCode; private int auditFlag; //0--未审核,1--审核不通过,2--审核通过 private String time; @Id @GeneratedValue(strategy= GenerationType.AUTO) public int getId() { return id; } public void setId(int id) { this.id = id; } public Long getPhone() { return phone; } public void setPhone(Long phone) { this.phone = phone; } public String getInviteCode() { return inviteCode; } public void setInviteCode(String inviteCode) { this.inviteCode = inviteCode; } public int getAuditFlag() { return auditFlag; } public void setAuditFlag(int auditFlag) { this.auditFlag = auditFlag; } public String getTime() { return time; } public void setTime(String time) { this.time = time; } }
ok,Form和后台Form对象映射起来后,我需要考虑如何将Form提交到后台而且不跳转,因为页面里没有binding,这里就不能用@ModelAtrribute去捕获form表单了。
首先表单提交放到ajax里去完成:
1、
$(document).on("click", "#submit", function(e) { e.preventDefault(); x = $('form').serializeArray(); $.post('batchUpdate',x,function(msg) { alert(msg); }) });
这里注意的是将form序列化,serializeArray()是关键。并将表单post到batchUpdate url下。下边来看下后台如何捕获
2、
@RequestMapping(value={"/batchUpdate"}, method=RequestMethod.POST) public @ResponseBody String update(PointForm updatePoints) { String callback = updateOps.batchUpdate(updatePoints); return callback; }
很简单了,直接在方法参数里命名一个PointForm,这样提交过来的Form就会封装到这个对象中了
这里前端form的序列化和后台的捕获是关键
over
相关文章推荐
- Form表单多文件改名ajax提交上传及java后台处理
- SpringBind对象到页面时,用ajax提交form表单内容,后台无法获取绑定对象问题
- form表单提交,后台怎么获取select的值?后台直接获取即可,和input方式一样。
- 用FormData处理form表单中同时有文件和普通文本的提交的处理方式
- form表单提交后 停留当前界面面 不刷新 的处理方式
- Checkbox框全选操作,form表单提交与jquery ajax提交两种处理方式
- 对表单form get或post提交数据乱码的终极处理方式
- form表单put方式提交处理
- java后台以post方式提交表单(spring RedirectView post提交)
- jquery多选择动态参数的使用以及ajax异步请求中提交整个form表单中serializeArray()的使用以及后台值得获取方式
- jsp处理c for循环中取到每一条信息+get方式提交form表单参数拼接问题
- 使用 ajax 方式提交表单,并获取后台处理结果
- Jquery 异步提交表单有form无form的时候处理方式
- 关于form表单提交文件file后台controller中参数获取不到的解决办法
- springMVC+thymeleafform表单提交前后台数据传递
- spring security form 表单提交 多种方式登录(如用户名,邮箱,+密码)登录)
- 用get方式提交form表单的中文处理方式
- springMVC+thymeleaf form表单提交前后台数据传递
- js同时提交多个Form表单数据至后台的拼装处理
- 表单防止重复提交处理的前后台两种处理方式