前后端分离

最新推荐文章于 2024-11-03 10:26:49 发布

liaoMITC

最新推荐文章于 2024-11-03 10:26:49 发布

阅读量1.1k

点赞数 2

文章标签：前端 javascript java

本文链接：https://blog.csdn.net/liaojsgtcg/article/details/121317062

版权

本文介绍了前后端分离的视频展示功能，包括删除、更新和插入操作的数据交互。前端通过AJAX与后端进行JSON格式的通信，实现学生信息的增删改。删除操作中，前端传递ID列表，后端执行删除；更新操作中，前端序列化对象并发送，后端接收并更新数据；插入操作同样涉及前端的JSON数据发送与后端的接收并插入数据库。

摘要由CSDN通过智能技术生成

视频展示功能

B站视频

前后端分离对应数据交互部分

删除

前端：

			$.ajax({ //使用ajax向数据库发送请求
				type: "post", //post请求
				url: basepath + "/stu/delete", //请求到的后端URL
				data: {
					"listString": idList //传入的数据
				},
				dataType: "json", //传入数据的格式
			})

后端：

	@RequestMapping("/delete")
	@ResponseBody				//删除数据
	public Object delete(@RequestParam("listString[]") List<String> listString) {//接收前端ajax发送的请求
		studentDao.deleteStudent(Integer.parseInt(listString.get(0)));//执行删除操作
		return "删除成功";
	}

更新

前端：

$.ajax({
			type: "POST",
			url: basepath + "/stu/update", //连接后端URL
			data: JSON.stringify(userList), //将对象序列化成JSON字符串
			dataType: "json",
			contentType: 'application/json;charset=utf-8', //设置请求头信息
		});

后端：

	@RequestMapping("/update")
	@ResponseBody			
	//修改信息
	public Object update(@RequestBody Student[] array) { //接收前端ajax发送的请求
		//更新操作
		studentDao.update(array[0].getNum(),array[0].getName(),array[0].getProfession(),array[1].getNum());
		return "更新成功";
	}

插入

前端：

$.ajax({
				type: "post",
				url: basepath + "/stu/add", //连接到后端插曲URL
				data: JSON.stringify(userList), //传入数据
				dataType: "json", //设置格式
				contentType: 'application/json;charset=utf-8', //设置请求头信息
			});

后端：

	@PostMapping("/add")//URL设置
	@ResponseBody
	//插入数据库
	public void add(@RequestBody List<Student> list) {//接收前端ajax发送的请求
		System.out.println(list.get(0).getName());	
		studentDao.addStudent(list.get(0).getNum(),list.get(0).getName(),list.get(0).getProfession());//增加操作
	}