javaweb前端向后端传值的几种方式总结(附代码)

更新时间：2023年03月28日 11:09:04 作者：一路向前-执着

javaweb是java开发中的一个方向,下面这篇文章主要给大家介绍了关于javaweb前端向后端传值的几种方式的相关资料,文中通过实例代码介绍的非常详细,需要的朋友可以参考下

一、javaweb中前端向后端传值的几种方式

1.查询字符串的方式

即在请求地址后拼接上请求参数，多个参数以&连接- 表单方式提交

2.第一种方式是在表单中直接提交，第二种方式是通过ajax方式，data属性是js对象或者json对象，不指明contentType默认就是以表单方式提交。

3.json字符串方式

后端以@RequestBody方式接受，以对象形式接受，可以和查询字符串混用，除了对象之外后端还可以接受查询字符串参数。
经测试，后端不加@RequestBody，json字符串传到后台就不能正确匹配对象。

二、javaweb后台接收前台参数的三种注解

@RequestParam
@PathVariable
@RequestBody

2.1 @RequestParam

@RequestParam：将请求参数绑定到你控制器的方法参数上（是springmvc中接收普通参数的注解）。接收的参数是来自HTTP请求体或请求url的参数串中。。

语法：@RequestParam(value=”参数名”,required=”true/false”,defaultValue=””)

value：为接收url的参数名（相当于key值）。
required：是否包含该参数，默认为true，表示该请求路径中必须包含该参数，如果不包含就报错。
defaultValue：默认参数值，如果设置了该值，required=true将失效，自动为false,如果没有传该参数，就使用默认值。

@RequestParam用来处理 Content-Type 为 application/x-www-form-urlencoded 编码的内容，Content-Type默认为该属性。

@RequestParam也可用于其它类型的请求，例如：POST、DELETE等请求。

代码如下：

1.get请求参数带在url中。

前端代码：

<button><a href="/annotation/paramGet?name=tom&age=15" target="_blank">点我发送get请求</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请求参数带在url或者请求体中

前端代码：

<button style="color: yellowgreen" onclick="paramPost()">点我发送post请求</button>

<script type="text/javascript">
    //post请求参数带在url中。
    function paramPost() {
        $.ajax({
            type:"post",
            //参数在url中，载荷是查询字符串，就是没有请求体
            // url:"paramPost?name=jack&age=25",
            url:"paramPost",
            //参数在请求体中，js对象和json对象都可以提交，默认是提交表单数据
            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>
    分数：<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对象，不指明contentType是一样的。

2.2 @PathVariable

Web应用中的URL通常不是一成不变的，例如微博两个不同用户的个人主页对应两个不同的URL：http://weibo.com/user1和http://weibo.com/user2。我们不能对于每一个用户都编写一个被@RequestMapping注解的方法来处理其请求，也就是说，对于相同模式的URL（例如不同用户的主页，他们仅仅是URL中的某一部分不同，为他们各自的用户名，我们说他们具有相同的模式）。
可以在@RequestMapping注解中用{ }来表明它的变量部分，例如：

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

需要注意的是，在默认情况下，变量中不可以包含URL的分隔符/，例如路由不能匹配/user/Denny/Jon，即使你认为Denny/Jon是一个存在的用户名。

在路由中定义变量规则后，通常我们需要在处理方法（也就是@RequestMapping注解的方法）中获取这个URL的具体值，并根据这个值（例如用户名）做相应的操作， 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">点我发送path请求</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字符串中的数据的(请求体中的数据的)；而最常用的使用请求体传参的无疑是POST请求了，所以使用@RequestBody接收数据时，一般都用POST方式进行提交。在后端的同一个接收方法里，@RequestBody与@RequestParam()可以同时使用， @RequestBody最多只能有一个，而@RequestParam()可以有多个。

注：一个请求，只有一个RequestBody；一个请求，可以有多个RequestParam。

前端代码：

<button onclick="requestBodyTest()">点我测试requestbody</button>


<script type="text/javascript">
//测试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),
            //指定发送数据的格式
            contentType:"application/json", //是这种格式，不是json/application
            //指定返回数据的格式
            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;
}

总结

到此这篇关于javaweb前端向后端传值的几种方式总结的文章就介绍到这了,更多相关javaweb前端向后端传值内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！

您可能感兴趣的文章:

Java设计模式之策略模式深入刨析
策略模式属于Java 23种设计模式中行为模式之一，该模式定义了一系列算法，并将每个算法封装起来，使它们可以相互替换，且算法的变化不会影响使用算法的客户。本文将通过示例详细讲解这一模式，需要的可以参考一下
2022-05-05
SpringCloud使用Zookeeper作为注册中心
这篇文章主要介绍了SpringCloud如何使用Zookeeper作为注册中心，帮助大家更好的理解和学习使用Zookeeper，感兴趣的朋友可以了解下
2021-04-04
Java面向对象之继承、构造方法、重写、重载
本章具体介绍了什么是构造方法、继承、重写、重载以及创建方法，整篇文章用老司机和人类来举例，图解穿插代码案例,需要的朋友可以参考下
2023-03-03
Java单链表的实现代码
这篇文章主要介绍了Java单链表的实现代码的相关资料,非常不错，具有参考借鉴价值，需要的朋友可以参考下
2016-07-07
Mybatis-Plus的多数据源你了解吗
这篇文章主要为大家详细介绍了Mybatis-Plus的多数据源，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下，希望能够给你带来帮助
2022-03-03
Java中BigDecimal的基本运算(详解)
下面小编就为大家带来一篇Java中BigDecimal的基本运算(详解)。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧
2017-10-10
Java跨域问题分析与解决方法详解
这篇文章主要介绍了Java跨域问题分析与解决方法，跨域问题是在Web应用程序中，由于同源策略的限制，导致浏览器无法发送跨域请求，也无法获取跨域响应的问题，感兴趣想要详细了解可以参考下文
2023-05-05
springboot2.X整合prometheus监控的实例讲解
这篇文章主要介绍了springboot2.X整合prometheus监控的实例讲解，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
2021-03-03
SpringBoot中的文件上传与下载详解
这篇文章主要介绍了SpringBoot中的文件上传与下载详解,springboot是spring家族中的一个全新框架,用来简化spring程序的创建和开发过程,本文我们就一起来看看上传与下载的操作,需要的朋友可以参考下
2023-08-08
spring用户通过交互界面登录成功的实现
本文主要介绍了spring用户通过交互界面登录成功的实现，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
2023-07-07