首页 > 其他分享> > 前端如何将实体对象（包含其他实体的）传给后端

前端如何将实体对象（包含其他实体的）传给后端

2021-03-26 19:29:23 作者：互联网

记录一次后台接口使用封装后的javaBean作为参数，给前端进行调用

接口如下：

整体请求路径，http://127.0.0.1:2024//view/roster/RosterController/inSertRoter2

   @ApiOperation(value = "写表", notes = "返回值说明\n" +
            "code: success：成功 error:失败\n" +
            "msg: 调用成功或失败信息，该接口信息均可在前端进行提示！\n" +
            "data: ")
    @RequestMapping(value = "inSertRoter2" ,method = RequestMethod.POST )
    public void inSertRoter2(@RequestBody Zoo zoo) {
        System.out.println(zoo.toString());
        System.out.println();
    }

实体类：Zoo

package com.dfec.cpbis.controller.view.fp.roster;

import lombok.Data;

import java.util.List;

/**
 * ClassName: Zoo
 * Description:
 * date: 2021-03-26 18:07
 *
 * @author tangrg
 * @since JDK 1.8
 */
@Data
public class Zoo {
    private String eyes;
    private int ages;
    private List<Dog> dogList;

    @Override
    public String toString() {
        return "Zoo{" +
                "eyes='" + eyes + '\'' +
                ", ages=" + ages +
                ", dogList=" + dogList +
                '}';
    }
}

实体类：Dog

package com.dfec.cpbis.controller.view.fp.roster;

import lombok.Data;

/**
 * ClassName: Dog
 * Description:
 * date: 2021-03-26 18:08
 *
 * @author tangrg
 * @since JDK 1.8
 */
@Data
public class Dog {
    private int age;
    private String eye;
}

后端代码如上：

前端测试代码：

<html> 
 <head> 
<meta charset="UTF-8">
 </head> 
<body>
<center><h2>模式数据监测表</h2></center>

 <div> 
 <div class="loginText" style="margin-top: 20px;"> 
 <button onclick="butSubmit()"> buttonsss</button>
 </div>
				
 
 
 </div>
 	<script src="js/jquery-1.10.2.min.js"></script>
 <script>
 function butSubmit() {
 	var dog = {"eyes":"eye",
 			  "ages":1 }
 		var dog1 = {"eyes":"eye1",
 			  "ages":2 }
 	var dogList = new Array();
 	dogList.push(dog);
 	 	dogList.push(dog1);

console.log(dogList)
 	var zoo = {"eyes":"eyes",
 			  "ages":2,
 			"dogList":dogList
 			
 			}
		 
		 
			$.ajax({
				url: 'http://127.0.0.1:2024//view/roster/RosterController/inSertRoter2',
				type: 'post',
				headers:{'Content-Type': 'application/json'},//设置请求头
				dataType:'json',
				data: JSON.stringify(zoo),
				success: function(data) {
					if(data) {
					 alert(data)
					} else {
					  alert(data)
					}
				}
			});
		}
 </script>
</body></html>

点击页面中的按钮，进行请求，

以上测试完毕：

总结：

①主要是对于请求头，要使用

headers:{'Content-Type': 'application/json'},//设置请求头

②对于后端的list，相当于前端的数组，所以在存放数据的时候，要使用数组去存

标签：eyes,前端,实体,ages,private,Zoo,dogList,传给,data
来源： https://blog.csdn.net/qq_35712465/article/details/115253407