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

2021-03-26 19:29:23 阅读：757 来源： 互联网

标签：eyes 前端实体 ages private Zoo dogList 传给 data

记录一次后台接口使用封装后的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

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

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