javaweb前端向后端傳值的幾種方式總結(jié)(附代碼)

更新時(shí)間：2023年03月28日 11:09:04 作者：一路向前-執(zhí)著

javaweb是java開發(fā)中的一個(gè)方向,下面這篇文章主要給大家介紹了關(guān)于javaweb前端向后端傳值的幾種方式的相關(guān)資料,文中通過實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下

一、javaweb中前端向后端傳值的幾種方式

1.查詢字符串的方式

即在請(qǐng)求地址后拼接上請(qǐng)求參數(shù)，多個(gè)參數(shù)以&連接- 表單方式提交

2.第一種方式是在表單中直接提交，第二種方式是通過ajax方式，data屬性是js對(duì)象或者json對(duì)象，不指明contentType默認(rèn)就是以表單方式提交。

3.json字符串方式

后端以@RequestBody方式接受，以對(duì)象形式接受，可以和查詢字符串混用，除了對(duì)象之外后端還可以接受查詢字符串參數(shù)。
經(jīng)測(cè)試，后端不加@RequestBody，json字符串傳到后臺(tái)就不能正確匹配對(duì)象。

二、javaweb后臺(tái)接收前臺(tái)參數(shù)的三種注解

@RequestParam
@PathVariable
@RequestBody

2.1 @RequestParam

@RequestParam：將請(qǐng)求參數(shù)綁定到你控制器的方法參數(shù)上（是springmvc中接收普通參數(shù)的注解）。接收的參數(shù)是來自HTTP請(qǐng)求體或請(qǐng)求url的參數(shù)串中。。

語法：@RequestParam(value=”參數(shù)名”,required=”true/false”,defaultValue=””)

value：為接收url的參數(shù)名（相當(dāng)于key值）。
required：是否包含該參數(shù)，默認(rèn)為true，表示該請(qǐng)求路徑中必須包含該參數(shù)，如果不包含就報(bào)錯(cuò)。
defaultValue：默認(rèn)參數(shù)值，如果設(shè)置了該值，required=true將失效，自動(dòng)為false,如果沒有傳該參數(shù)，就使用默認(rèn)值。

@RequestParam用來處理 Content-Type 為 application/x-www-form-urlencoded 編碼的內(nèi)容，Content-Type默認(rèn)為該屬性。

@RequestParam也可用于其它類型的請(qǐng)求，例如：POST、DELETE等請(qǐng)求。

代碼如下：

1.get請(qǐng)求參數(shù)帶在url中。

前端代碼：

<button><a href="/annotation/paramGet?name=tom&age=15" target="_blank">點(diǎn)我發(fā)送get請(qǐng)求</a></button>

后端代碼：

@RequestMapping(value = "paramGet",produces = "application/json;charset=utf-8")
@ResponseBody
public String paramGet(@RequestParam("name")String username,
                       @RequestParam("age")int age,
                       @RequestParam(value = "score",required = false)Float score){
    return username+"今年"+age+"歲"+"，考試得了"+score+"分！";
}

2.post請(qǐng)求參數(shù)帶在url或者請(qǐng)求體中

前端代碼：

<button style="color: yellowgreen" onclick="paramPost()">點(diǎn)我發(fā)送post請(qǐng)求</button>

<script type="text/javascript">
    //post請(qǐng)求參數(shù)帶在url中。
    function paramPost() {
        $.ajax({
            type:"post",
            //參數(shù)在url中，載荷是查詢字符串，就是沒有請(qǐng)求體
            // url:"paramPost?name=jack&age=25",
            url:"paramPost",
            //參數(shù)在請(qǐng)求體中，js對(duì)象和json對(duì)象都可以提交，默認(rèn)是提交表單數(shù)據(jù)
            data:{name:"jack",
                age:15
            },
            dataType:"json",
            success: function(data){
                console.log(data);
                alert(data);
                alert(data.sss);
            }
        });

    }
</script>

后端代碼：

@RequestMapping(value = "paramPost",produces = "application/json;charset=utf-8",method = RequestMethod.POST)
@ResponseBody
public Map<String,String> paramPost(@RequestParam("name")String username, 
                                    @RequestParam("age")int age,
                         @RequestParam(value = "score",required = false)Float score){
        Map<String,String> map = new HashMap<>();
        String ss = username+"今年"+age+"歲"+"，考試得了"+score+"分！";
        map.put("sss",ss);
        return map;
}

3.直接以表單方式提交

前端代碼：

<form action="<%=basePath%>annotation/paramPost" method="post">
    姓名：<input type="text" name="name" required="required"><br>
    年齡：<input type="text" name="age" required="required"><br>
    分?jǐn)?shù)：<input type="text" name="score"><br>
    <input type="submit">
</form>

后端代碼：

@RequestMapping(value = "paramPost",produces = "application/json;charset=utf-8",method = RequestMethod.POST)
@ResponseBody
public Map<String,String> paramPost(@RequestParam("name")String username, 
                                    @RequestParam("age")int age,
                         @RequestParam(value = "score",required = false)Float score){
        Map<String,String> map = new HashMap<>();
        String ss = username+"今年"+age+"歲"+"，考試得了"+score+"分！";
        map.put("sss",ss);
        return map;
}

上面這種方式提交就是表單方式，它和通過ajax方式，data屬性是js或者json對(duì)象，不指明contentType是一樣的。

2.2 @PathVariable

Web應(yīng)用中的URL通常不是一成不變的，例如微博兩個(gè)不同用戶的個(gè)人主頁對(duì)應(yīng)兩個(gè)不同的URL：http://weibo.com/user1和http://weibo.com/user2。我們不能對(duì)于每一個(gè)用戶都編寫一個(gè)被@RequestMapping注解的方法來處理其請(qǐng)求，也就是說，對(duì)于相同模式的URL（例如不同用戶的主頁，他們僅僅是URL中的某一部分不同，為他們各自的用戶名，我們說他們具有相同的模式）。
可以在@RequestMapping注解中用{ }來表明它的變量部分，例如：

@RequestMapping(value="/user/{username}")

需要注意的是，在默認(rèn)情況下，變量中不可以包含URL的分隔符/，例如路由不能匹配/user/Denny/Jon，即使你認(rèn)為Denny/Jon是一個(gè)存在的用戶名。

在路由中定義變量規(guī)則后，通常我們需要在處理方法（也就是@RequestMapping注解的方法）中獲取這個(gè)URL的具體值，并根據(jù)這個(gè)值（例如用戶名）做相應(yīng)的操作， SpringMVC提供的@PathVariable可以幫助我們：

@RequestMapping(value="/user/{name}")
public String userProfile(@PathVariable(value="name") String username) {
return "user"+username;
}

PathVariable加RequestParam的組合方式：

前端代碼：

<button><a href="<%=basePath%>annotation/pathTest/david/16?score=19.5" target="_blank">點(diǎn)我發(fā)送path請(qǐng)求</a></button>

后端代碼：

@RequestMapping(value = "pathTest/{name}/{age}",produces = "application/json;charset=utf-8")
@ResponseBody
public Map<String,String> pathTest(@PathVariable("name")String username, 
                                   @PathVariable("age")int age,
                                   @RequestParam(value = "score",required = false)Float score){
        Map<String,String> map = new HashMap<>();
        String ss = username+"今年"+age+"歲"+"，考試得了"+score+"分！";
        map.put("sss",ss);
        return map;
}

2.3 @RequestBody

@RequestBody主要用來接收前端傳遞給后端的json字符串中的數(shù)據(jù)的(請(qǐng)求體中的數(shù)據(jù)的)；而最常用的使用請(qǐng)求體傳參的無疑是POST請(qǐng)求了，所以使用@RequestBody接收數(shù)據(jù)時(shí)，一般都用POST方式進(jìn)行提交。在后端的同一個(gè)接收方法里，@RequestBody與@RequestParam()可以同時(shí)使用， @RequestBody最多只能有一個(gè)，而@RequestParam()可以有多個(gè)。

注：一個(gè)請(qǐng)求，只有一個(gè)RequestBody；一個(gè)請(qǐng)求，可以有多個(gè)RequestParam。

前端代碼：

<button onclick="requestBodyTest()">點(diǎn)我測(cè)試requestbody</button>


<script type="text/javascript">
//測(cè)試requestbody
    function requestBodyTest() {
        let json = {"uName":"david","phone":13887898998};
        alert(typeof json);
        $.ajax({
            type:"post",
            url:"<%=basePath%>annotation/requestBodyTest?score=17.8",
            //json字符串
            data:JSON.stringify(json),
            //指定發(fā)送數(shù)據(jù)的格式
            contentType:"application/json", //是這種格式，不是json/application
            //指定返回?cái)?shù)據(jù)的格式
            dataType:"json",
            success: function(data){
                console.log(typeof data);
                console.log(data);
                alert(typeof data);
                alert(data.sss);
            }
        });

    }
</script>

后端代碼：

@RequestMapping(value = "requestBodyTest",produces = "application/json;charset=utf-8",method = RequestMethod.POST)
@ResponseBody
public Map<String,String> requestBodyTest(@RequestBody User user,
                                          @RequestParam(value = "score",required = false)Float score){
        Map<String,String> map = new HashMap<>();
        String ss = user.getuName()+"今年"+"考試得了"+score+"分！";
        map.put("sss",ss);
        return map;
}