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

最新推荐文章于 2022-03-26 21:44:46 发布

丨莱茵

最新推荐文章于 2022-03-26 21:44:46 发布

阅读量1.2k

点赞数

分类专栏： Ajax java 力量

原文链接：https://www.cnblogs.com/new-life/p/11138873.html

版权

java 同时被 3 个专栏收录

13 篇文章 0 订阅

订阅专栏

力量

6 篇文章 0 订阅

订阅专栏

Ajax

1 篇文章 0 订阅

订阅专栏

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();
}

}

页面：
<%@ page language="java" contentType="text/html; charset=utf-8" pageEncoding="utf-8"%>
<html>
<%application.setAttribute("path", request.getContextPath());%>
<head>
    <script type="text/javascript" src="${path}/js/jquery.min.js"></script>
</head>
<body>
<h2>Hello World!</h2>
<button id="listString">List&lt;String&gt;传参</button>
<button id="listUser">List&lt;User&gt;传参</button>
<button id="arrayUsers">User[]传参</button>
<button id="listMap">List&lt;Map&lt;String,Object&gt;&gt;传参</button>
<button id="Users">User对象（属性包含List&lt;User&gt;）传参</button>
<script type="text/javascript">

    // List<String>传参
    $("#listString").click(function(){
        var idList = new Array();  
        idList.push("1");   
        idList.push("1");   
        idList.push("1");   
        $.ajax({
            type:"post",
            url:"${path}/listString",
            data:{"listString":idList},
            dataType:"json",
            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:"${path}/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: "${path}/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:"${path}/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:"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方式进行提交。

丨莱茵

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
页面ajax请求传参及java后端数据接收

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....
复制链接

扫一扫