Form表单的二种提交方式(Spring后台controller处理)

这里总结下form表单的二种常见的提交方式,所用的模块为前端jquery+thymeleaf; 后台Springboot。

第一种:提交跳转型:
顾名思义,form一旦submit,默认提交表单并跳转

thymeleaf页面:


<html xmlns:th="http://www.thymeleaf.org">
<head>
    <title>Getting Started: Handling Form Submissiontitle>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
head>
<body>
    <h1>Formh1>
    <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表单的二种提交方式(Spring后台controller处理)_第1张图片

这里我把需要提交的数据写在了form下的一个table里(因为我要展示这些数据,同时还可以以form的形式提交),这里我把需要提交的数据映射到了updatePoints对象,该对象在后台是这个样子:
注意,Form对应PointForm,Form里的updatePoints对应对象的updatePoints

package com.cloudhealth.ecommerce.entity;

import java.util.List;

public class PointForm {

    private List updatePoints;

    public List getUpdatePoints() {
        return updatePoints;
    }

    public void setUpdatePoints(List 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

你可能感兴趣的:(J2EE基础知识)