页面ajax请求传参及java后端数据接收

2020-12-15

js ajax请求传参及java后端数据接收

后端controller的代码

复制代码
Controller：
package com.ysl.PassingParameters.controller;
import java.util.List;
import java.util.Map;

import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.RequestBody;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RequestParam;
import org.springframework.web.bind.annotation.ResponseBody;

import com.ysl.PassingParameters.bean.User;
import com.ysl.PassingParameters.dto.RetMsg;

@Controller
public class TestController {

    /**
     * List<String>传参
     * @param listString
     * @return
     */
    @RequestMapping("/listString")
    @ResponseBody
    public RetMsg listString(@RequestParam("listString[]") List<String> listString){
        System.out.println("listString:"+listString.toString());
        return RetMsg.success();
    }


    /**
     * List<User>传参
     * @param listUser
     * @return
     */
    @RequestMapping("/listUsers")
    @ResponseBody
    public RetMsg listUsers(@RequestBody List<User> listUser){
        System.out.println("username:"+listUser.get(0).getUsername());
        return RetMsg.success();
    }


    /**
     * User[]传参
     * @param arrayUsers
     * @return
     */
    @RequestMapping("/arrayUsers")
    @ResponseBody
    public RetMsg arrayUsers(@RequestBody User[] arrayUsers){
        System.out.println("username:"+arrayUsers[0].getUsername());
        return RetMsg.success();
    }


    /**
     * List<Map<String,Object>>传参
     * @param listMap
     * @return
     */
    @RequestMapping("/listMap")
    @ResponseBody
    public RetMsg listMap(@RequestBody List<Map<String, String>> listMap){
        System.out.println("username:"+listMap.get(0).get("username"));
        return RetMsg.success();
    }

    /**
     * User对象传参
     * @param arrayUsers
     * @return
     */
    @RequestMapping("/users")
    @ResponseBody
    public RetMsg users(@RequestBody User users){
        System.out.println("username:"+users.getUsername());
        System.out.println("username:"+users.getList().get(0).getUsername());
        return RetMsg.success();
    }
}
复制代码

前端代码：

复制代码
页面：
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>测试ajax传参</title>
  <script type="text/javascript" src="./lib/jquery.min.js"></script>
</head>
<body>
<h2>Hello World!</h2>
<button id="stringAndString">ListString传参</button>
<button id="listString">ListString传参</button>
<button id="User">User传参</button>
<button id="listUser">ListUser传参</button>
<button id="arrayUsers">User[]传参</button>
<button id="listMap">ListMapStringObject传参</button>
<button id="Users">User对象（属性包含ListUser）传参</button>
<script type="text/javascript">
  var prourl = "http:localhost:8080";

  // 多参数传参
  $("#stringAndString").click(function(){
    str1 = "zhang";
    str2 = "123456";
    $.ajax({
      type:"post",
      url:"${prourl}/stringAndString",
      data:"string1="+str1+"&string2="+str2,
      dataType:"json",
      success:function(retMsg){
        if(retMsg.code==200){
          alert("success");
        }else{
          alert("false");
        }
      }
    })
  })

  // List<String>传参
  $("#listString").click(function(){
    var idList = new Array();
    idList.push("1");
    idList.push("1");
    idList.push("1");
    $.ajax({
      type:"post",
      url:"${prourl}/listString",
      data:{"listString":idList},
      dataType:"json",
      success:function(retMsg){
        if(retMsg.code==200){
          alert("success");
        }else{
          alert("false");
        }
      }
    })
  })

  // User传参
  $("#user").click(function(){
    var user = {username: "zhangsan",password: "332"};
    $.ajax({
      type:"post",
      url:"${prourl}/user",
      data:JSON.stringify(user),
      dataType:"json",
      contentType : 'application/json;charset=utf-8', //设置请求头信息
      success:function(retMsg){
        if(retMsg.code==200){
          alert("success");
        }else{
          alert("false");
        }
      }
    })
  })

  // List<User>传参
  $("#listUser").click(function(){
    var userList = new Array();
    userList.push({username: "zhangsan",password: "332"});
    userList.push({username: "zhangsan",password: "332"});
    $.ajax({
      type:"post",
      url:"${prourl}/listUsers",
      data:JSON.stringify(userList),
      dataType:"json",
      contentType : 'application/json;charset=utf-8', //设置请求头信息
      success:function(retMsg){
        if(retMsg.code==200){
          alert("success");
        }else{
          alert("false");
        }
      }
    })
  })


  //传User对象数组
  $("#arrayUsers").click(function(){
    var userList = [{username: "李四",password: "123"},{username: "张三",password: "332"}];
    $.ajax({
      type: "POST",
      url: "${prourl}/arrayUsers",
      data: JSON.stringify(userList),//将对象序列化成JSON字符串
      dataType:"json",
      contentType : 'application/json;charset=utf-8', //设置请求头信息
      success:function(retMsg){
        if(retMsg.code==200){
          alert("success");
        }else{
          alert("false");
        }
      }
    });
  })

  // List<Map<String,Object>>传参
  $("#listMap").click(function(){
    var userList = new Array();
    userList.push({username: "zhangsan",password: "332"});
    userList.push({username: "zhangsan",password: "332"});
    $.ajax({
      type:"post",
      url:"${prourl}/listMap",
      data:JSON.stringify(userList),
      dataType:"json",
      contentType : 'application/json;charset=utf-8', //设置请求头信息
      success:function(retMsg){
        if(retMsg.code==200){
          alert("success");
        }else{
          alert("false");
        }
      }
    })
  })

  //User对象传参
  $("#Users").click(function(){
    var list = new Array();
    list.push({username: "zhangsan",password: "332"});
    list.push({username: "zhangsan",password: "332"});
    var user = {};
    user.username = "张三";
    user.password = "密码";
    user.list = list;
    $.ajax({
      type:"post",
      url:"${prourl}/users",
      data:JSON.stringify(user),
      datatype:"json",
      contentType:"application/json;charset=utf-8",
      success:function(retMsg){
        if(retMsg.code==200){
          alert("success");
        }else{
          alert("false");
        }
      }
    })
  })
</script>
</body>
</html>
复制代码

@RequestBody主要用来接收前端传递给后端的json字符串中的数据的(请求体中的数据的);

GET方式无请求体，所以使用@RequestBody接收数据时，前端不能使用GET方式提交数据，而是用POST方式进行提交。

参考：https://www.cnblogs.com/new-life/p/11138873.html

posted @   秦时明月0515  阅读(1314)  评论(0)  编辑  收藏  举报
编辑推荐：
· 10年+ .NET Coder 心语，封装的思维：从隐藏、稳定开始理解其本质意义
· .NET Core 中如何实现缓存的预热？
· 从 HTTP 原因短语缺失研究 HTTP/2 和 HTTP/3 的设计差异
· AI与.NET技术实操系列：向量存储与相似性搜索在 .NET 中的实现
· 基于Microsoft.Extensions.AI核心库实现RAG应用
阅读排行：
· TypeScript + Deepseek 打造卜卦网站：技术与玄学的结合
· 阿里巴巴 QwQ-32B真的超越了 DeepSeek R-1吗？
· 【译】Visual Studio 中新的强大生产力特性
· 10年+ .NET Coder 心语 ── 封装的思维：从隐藏、稳定开始理解其本质意义
· 【设计模式】告别冗长if-else语句：使用策略模式优化代码结构
点击右上角即可分享
微信分享提示
AI IDE Trae