表单提交的几种方式以及后台的接收

写在前面：

  刚接触web开发，列举下几种接收方式，有来自笔者自己的还有网络上的实例汇总。

html页面：

  用到一些jquery和ajax，以及可能会出现部分thymeleaf，thymeleaf在这里是没影响，没删除干净

后台：

  springboot 2.1，在这里其实是springMVC在做事所以对于Spring框架都通用

---

关于HTTP参数传递

在开始举例子之前，我们先简单聊聊在HTTP的请求中参数是怎么被组织的，被传递的。

HTTP参数传递有两大类型

• URL参数
  • 如url中的localhost:8080?h2=3&h3=3
  • 和下面提到的几种类型不同，这种参数的获取需要从url中解析出来，因此单独拿出来说。
• 在request的body中的数据
  • 如，表单数据(form)，和常见的json类型的数据，都是存储在body中，传递出去的。
  • 虽然常见后台对不同类型的数据有不同的解析方式，但是他们都在body中，以特殊的文件头形式存在，或者在Content-type中指定好类型告诉后端如何解析他。
  • 下图是后台打印request.Body中的内容，分别传递了三次不同类型参数的方式。
  • 

 

---

关于表单

  了解他提交了什么，以什么形式，提交到哪里去是非常重要的,这些在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" onsubmit="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();
    }
}