前端Ajax与SpringBoot交互时传递参数有如下几种方式。

1. 传输JSON对象

  • 前端

    1. <!DOCTYPE html>
    2. <html lang="en" xmlns:th="http://www.thymeleaf.org">
    3. <head>
    4.   <meta charset="UTF-8"/>
    5.   <!-- 省略不相关的一万行代码.... -->
    6.   <script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
    7. </head>
    8. <body>
    9.   <div class="container">
    10.       <div class="jumbotron mt-2 p-4">
    11.           <form action="/sign" method="post">
    12.               <p> <Input id="username" class="form-control" name="username" placeholder="请输入用户名" style="width: 95%; border-radius: 4px;"/> </p>
    13.               <p> <Input type="password" class="form-control" id="password" name="password" placeholder="请输入密码" style="width: 95%; border-radius: 4px;"/> </p>
    14.               <p> <Input type="hidden" id="lessonId" name="lessonId" style="width: 95%;"/> </p>
    15.               <div id="msg"></div>
    16.               <p> <Button id="login" type="submit" class="btn btn-login" style="width: 95%; background-color:#03ceb9; border-radius: 4px;"> 登录 </Button> </p>
    17.           </form>
    18.       </div>
    19.   </div>
    20. </body>
    21. <script>
    22.   $(document).ready(function(){
    23.       $("#login").click(function(){
    24.           event.preventDefault();
    25.           // 请求参数（JSON对象）
    26.           var params = { username: $('#username').val(), password: $('#password').val(), lessonId: $('#lessonId').val() };
    27.           console.log("参数：",params);
    28.           $.ajax({
    29.               // 请求方式
    30.               type : "POST",
    31.               dataType: 'JSON',
    32.               // 请求的媒体类型
    33.               contentType: "application/json;charset=UTF-8",
    34.               // 请求地址
    35.               url : "/sign",
    36.               // 数据，json对象
    37.               data : JSON.stringify(params),
    38.               // 请求成功
    39.               success : function(result) {
    40.                   $("#msg").text(result.msg);
    41.               },
    42.               // 请求失败，包含具体的错误信息
    43.               error : function(e){
    44.                   $("#msg").text(e.responseText);
    45.               }
    46.           });
    47.       });
    48.   });
    49. </script>
    50. </html>

  • 后端 ```java // 方法1：用Map对象接收JSON对象 @PostMapping(value=”/sign”,produces = {“application/json;charset=UTF-8”}) @ResponseBody public String Sign(@RequestBody Map user){ String str; // 省略不相关的一万行代码…. return “{\”msg\”:\””+str+”\”}”; }

// 方法2：用Pojo对象接收JSON对象 @PostMapping(value=”/sign”,produces = {“application/json;charset=UTF-8”}) @ResponseBody public String Sign(@RequestBody User user){ String str; // 省略不相关的一万行代码…. return “{\”msg\”:\””+str+”\”}”; }

  1. <a name="uKOut"></a>
  2. # 2. 传输JSON字符串
  4. - **前端**
  5. ```html
  6. <!DOCTYPE html>
  7. <html lang="en" xmlns:th="http://www.thymeleaf.org">
  8. <head>
  9.     <meta charset="UTF-8"/>
  10.     <!-- 省略不相关的一万行代码.... -->
  11.     <script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
  12. </head>
  13. <body>
  14.     <div class="container">
  15.         <div class="jumbotron mt-2 p-4">
  16.             <form action="/sign" method="post">
  17.                 <p> <Input id="username" class="form-control" name="username" placeholder="请输入用户名" style="width: 95%; border-radius: 4px;"/> </p>
  18.                 <p> <Input type="password" class="form-control" id="password" name="password" placeholder="请输入密码" style="width: 95%; border-radius: 4px;"/> </p>
  19.                 <p> <Input type="hidden" id="lessonId" name="lessonId" style="width: 95%;"/> </p>
  20.                 <div id="msg"></div>
  21.                 <p> <Button id="login" type="submit" class="btn btn-login" style="width: 95%; background-color:#03ceb9; border-radius: 4px;"> 登录 </Button> </p>
  22.             </form>
  23.         </div>
  24.     </div>
  25. </body>
  26. <script>
  27.     $(document).ready(function(){
  28.         $("#login").click(function(){
  29.             event.preventDefault();
  30.             // 请求参数（JSON对象）
  31.             var params = { "username": $('#username').val(), "password": $('#password').val(), "lessonId": $('#lessonId').val() };
  32.             console.log("参数：",params);
  33.             $.ajax({
  34.                 // 请求方式
  35.                 type : "POST",
  36.                 dataType: 'JSON',
  37.                 // 请求地址
  38.                 url : "/sign",
  39.                 // 数据，json字符串
  40.                 data : params,
  41.                 // 请求成功
  42.                 success : function(result) {
  43.                     $("#msg").text(result.msg);
  44.                 },
  45.                 // 请求失败，包含具体的错误信息
  46.                 error : function(e){
  47.                     $("#msg").text(e.responseText);
  48.                 }
  49.             });
  50.         });
  51.     });
  52. </script>
  53. </html>

  • 后端

    1. @PostMapping(value="/sign",produces = {"application/json;charset=UTF-8"})
    2. @ResponseBody
    3. public String Sign(@RequestParam("username") String username,@RequestParam("password") String password,@RequestParam("lessonId")String lessonId){
    4.   String str;
    5.   // 省略不相关的一万行代码....
    6.   return "{\"msg\":\""+str+"\"}";
    7. }

    3. 传输JSON数组

  • 前端

    1. <!DOCTYPE html>
    2. <html lang="en" xmlns:th="http://www.thymeleaf.org">
    3. <head>
    4.   <meta charset="UTF-8"/>
    5.   <!-- 省略不相关的一万行代码.... -->
    6.   <script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
    7. </head>
    8. <body>
    9.   <div class="container">
    10.       <div class="jumbotron mt-2 p-4">
    11.           <form action="/sign" method="post">
    12.               <p> <Input id="username" class="form-control" name="username" placeholder="请输入用户名" style="width: 95%; border-radius: 4px;"/> </p>
    13.               <p> <Input type="password" class="form-control" id="password" name="password" placeholder="请输入密码" style="width: 95%; border-radius: 4px;"/> </p>
    14.               <p> <Input type="hidden" id="lessonId" name="lessonId" style="width: 95%;"/> </p>
    15.               <div id="msg"></div>
    16.               <p> <Button id="login" type="submit" class="btn btn-login" style="width: 95%; background-color:#03ceb9; border-radius: 4px;"> 登录 </Button> </p>
    17.           </form>
    18.       </div>
    19.   </div>
    20. </body>
    21. <script>
    22.   $(document).ready(function(){
    23.       $("#login").click(function(){
    24.           event.preventDefault();
    25.           // 请求参数（JSON对象）
    26.           var params = [{ "username": $('#username').val(), "password": $('#password').val(), "lessonId": $('#lessonId').val() }];
    27.           console.log("参数：",params);
    28.           $.ajax({
    29.               // 请求方式
    30.               type : "POST",
    31.               dataType: 'JSON',
    32.               // 请求的媒体类型
    33.               contentType: "application/json;charset=UTF-8",
    34.               // 请求地址
    35.               url : "/sign",
    36.               // 数据，json数组
    37.               data : JSON.stringify(params),
    38.               // 请求成功
    39.               success : function(result) {
    40.                   $("#msg").text(result.msg);
    41.               },
    42.               // 请求失败，包含具体的错误信息
    43.               error : function(e){
    44.                   $("#msg").text(e.responseText);
    45.               }
    46.           });
    47.       });
    48.   });
    49. </script>
    50. </html>

  • 后端

    1. @PostMapping(value="/sign",produces = {"application/json;charset=UTF-8"})
    2. @ResponseBody
    3. public String Sign(@RequestBody List<User> user){
    4.   String str;
    5.   // 省略不相关的一万行代码....
    6.   return "{\"msg\":\""+str+"\"}";
    7. }