表單提交的幾種方式以及後臺的接收

寫在前面：

  剛接觸web開發，列舉下幾種接收方式，有來自筆者自己的還有網絡上的實例彙總。

html頁面：

  用到一些jquery和ajax，以及可能會出現部分thymeleaf，thymeleaf在這裏是沒影響，沒刪除乾淨

後臺：

  springboot 2.1，在這裏其實是springMVC在做事所以對於Spring框架都通用

---

**關於表單

  瞭解他提交了什麼，以什麼形式，提交到哪裏去是非常重要的,這些在form的屬性中有定義，需要注意的是用ajax之類的方式提交時可以修改這三者，不要以爲form設置了就萬事大吉，除非你提交的是formData(霧)

提交形式:enctype

    post方式提交纔會生效，enctype 這個屬性是來設置提交方式，目前常用的是兩種編碼方式：application/x-www-form-urlencoded 和 multipart/form-data ， 這二個規則的使用場景簡單地說就是：後者在上傳文件時使用，前者是二進制流

提交內容：成功控件

    成功控件指form裏的<input>,<select>之類的能夠獲取到鍵值對的標籤，以<input value="123" name="name">爲例是一個

key=name,value=123的鍵值對

提交到哪裏去：action,ajax中的url

    action和ajax中指定的url

有篇博客詳細的介紹了，參考博客：https://www.cnblogs.com/luoqian/p/7115852.html

---

1.無刷新頁面提交表單

表單可實現無刷新頁面提交，無需頁面跳轉，如下，通過一個隱藏的iframe實現，form表單的target設置爲iframe的name名稱，
form提交目標位當前頁面iframe則不會刷新頁面

<form action="/url.do" method="post" target="targetIfr">
<input type="text" name="name"/>
</form>   
<iframe name="targetIfr" style="display:none"></iframe> 

2.通過type=submit提交

一般表單提交通過type=submit實現，input type="submit",瀏覽器顯示爲button按鈕，通過點擊這個按鈕提交表單數據跳轉到/url.do，如果需要

<form action="/url.do" method="post">
   <input type="text" name="name"/>
   <input type="submit" value="提交">
</form>

3.js提交form表單

js事件觸發表單提交，通過button、鏈接等觸發事件，js調用submit()方法提交表單數據，jquery通過submit()方法

<form id="form" action="/url.do" method="post">
   <input type="text" name="name"/>
</form>
   

<script type="text/javascript">           
document.getElementById("form").submit();
$("#form").submit();
</script>

前3種方式的接收,通過這種方式可以接收form中定義的鍵值對

如果參數名和input中的name相同，可以省略@requestParam
 

    @ResponseBody
    @PostMapping("login")
    public String login(@RequestParam String username,
                        @RequestParam String password,
                        ){
        return "get";
    }

 

，在springboot中還可以用@PathVariable從url中獲取參數值，獲取url中明文存在的參數可以用這種方式，這裏略

4.ajax+jq+獲取並提交表單數據

採用ajax異步方式，通過js獲取form中所有input、select等組件的值，將這些值組成Json格式，通過異步的方式與服務器端進行交互，在這裏如果不想實現頁面跳轉onsubmit中的function return false
一般將表單數據傳送給服務器端，服務器端處理數據並返回結果信息等

<form method="post" οnsubmit="return signup()">
                            <input type="text" class="form-control" id="account" />
                            <input type="text" class="form-control" id="nickName" />
                            <input type="password" class="form-control" id="password" />
                        <button type="submit" class="btn btn-block btn-md btn-primary">
                            signup
                        </button>
                    </form>

<script type="text/javascript">
    //todo 檢查密碼
    function signup() {
        var account = $('#account');
        var name = $('#username').val();
        var password = $('#password').val();
        $.ajax({
            url:"/signup",
            type:"POST",
            contentType:"application/json",//前面有提過，這是數據的編碼方式，指定這個方式後臺才能以正確的形式接受，這裏後臺接收的是json格式的String
            dataType:"json",
            data:JSON.stringify({
                "account":account,
                "insttitution":institution,
                "name":name,
                "password":password
            })
        });
        return false;
    }
</script>

後臺接收方式：application/json接收方式爲@requestBody，因爲spring缺少直接轉json對象的包，所以引入jackson之類的包能使用@RequestBody JSONObject json 的方式接收json數據

 @PostMapping("signup")
 @ResponseBody
    public String signup(@RequestBody String json){//@RequestBody JSONObject json
        System.out.println(json);
        return "get";
    }

5，還存在綁定對象接收，就是有一個屬性和表單提交數據格式名字相同的對象來接收，這裏略

以上方式其實可以歸爲兩大類，也就是contentType不同接收方式的不同

 

6,文件上傳與接收，指定enctype=multipart/form-data方式的接收也就是文件上傳

<form method="post" action="/upload" enctype="multipart/form-data">
    <input type="file" name="file"><br>
    <input type="submit" value="提交">
</form>

接收方式可以使用第一種

@PostMapping("/upload")
    @ResponseBody
    public String upload(@RequestParam("file") MultipartFile file) {
    return "get";
}

7，ajax+formData+jq提交表單

如果要使用ajax提交包含文件的表單數據，表單的enctype指定multipart/form-data，然後接收方式跟1-4種相同

<script type="text/javascript">
        function f() {
            var formData = new FormData($('#projectForm')[0]);
            $.ajax({
                url:"/project/test",
                type:"post",
                data:formData,
				processData:false,
				contentType:false,
                success:function (result) {
                    if (result && result.success) {
                        // window.location.href = "/index";
                    } else {
                        alert(result.msg);
                    }
                }
            });
            return false;
        }
	</script>

後端接收方式：

@PostMapping("/test")
    @ResponseBody
    public RestResponseBo test(@RequestParam("projectName") String name,
                               @RequestParam("projectId") String id,
                               @RequestParam("projectLeader") String leader,
                               @RequestParam("budget") String budget,
                               @RequestParam("ins") String ins,
                               String level,
                               String[] member,
                               @RequestParam("projectFile") MultipartFile file,
            HttpServletRequest request){
        String[] teamMember = request.getParameterValues("team");
        System.out.println("in!!!!!!!!!!!!!!!!!!!!!!!!!");
        System.out.println(teamMember.length);
        return RestResponseBo.ok();
    }
}