java三阶段学习_day04

最新推荐文章于 2024-08-24 17:09:16 发布

小骄傲_倍儿坚强

最新推荐文章于 2024-08-24 17:09:16 发布

阅读量94

点赞数

文章标签： java ajax javascript html jquery

本文链接：https://blog.csdn.net/m0_58407149/article/details/119104072

版权

1 搭建后端完整结构

1.1 后端的结构说明

1.1.1 后端作用

接收前端发送的数据.(接收) SpringMVC Controller
按照用户的业务需求处理数据.(处理) Spring Service
将处理之后的结果,按照特定的要求返回给用户(返回) SpringMVC Controller

1.1.2 代码结构

在这里插入图片描述

1.1.3 后端测试要求

: 接收url 请求地址,之后json数据返回
url: http://localhost:8090/getAll
要求利用MP方式查询数据库

1.1.4 编辑Service

UserService接口
在这里插入图片描述
UserService实现类

1.1.5 编辑controller

在这里插入图片描述

1.1.6 运行启动类

在这里插入图片描述

1.1.7 前端展示效果

在这里插入图片描述

2.1 前后端调用流程

2.2 前端的构建

2.2.1 编辑前端页面

需求: 前端准备一个表格,在表格中展现后端查询的所有数据.
知识点:
1.html css
2.jQuery
3.Ajax $.ajax({…})
4.了解js处理的基本用法. VUE

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>用户列表demo</title>
		<script src="jquery-3.6.0.min.js"></script>
		<script>
			$.ajax({
				url: "http://localhost:8090/getAll",
				type: "post",
				success: function(data){
					
					for(user of data){
					 	// var str="<tr align='center'><td>"+user.id+"</td><td>"+user.name+"</td><td>"+user.age+"</td><td>"+user.sex+"</td></tr>"
						let str = `
						<tr align='center'>
						<td>${user.id}</td>
						<td>${user.name}</td>
						<td>${user.age}</td>
						<td>${user.sex}</td>
						</tr>
						`
			
					$("#a1").append(str);
					}
				}
				
			})
		</script>
		
	</head>
	<body>
		<table id="a1" border="1px" align="center" width="80%">
			<tr>
				<td colspan="4" align="center"><h1>用户的列表</h1></td>
			</tr>
			<tr>
				<td align="center">编号</td>
				<td align="center">姓名</td>
				<td align="center">年龄</td>
				<td align="center">性别</td>
			</tr>
			<tr>
				<td align="center">100</td>
				<td align="center">黑熊精</td>
				<td align="center">3000</td>
				<td align="center">男</td>
			</tr>
			
		</table>
	</body>
</html>

2.3 关于JSON结构

2.3.1 什么是JSON

JSON(JavaScript Object Notation) 是一种轻量级的数据交换格式。它使得人们很容易的进行阅读和编写。同时也方便了机器进行解析和生成。它是基于 JavaScript Programming Language , Standard ECMA-262 3rd Edition - December 1999 的一个子集。 JSON采用完全独立于程序语言的文本格式，但是也使用了类C语言的习惯（包括C, C++, C#, Java, JavaScript, Perl, Python等）。这些特性使JSON成为理想的数据交换语言。

2.3.2 JSON结构对象object格式

对象（object） 是一个无序的“‘名称/值’对”集合。一个对象以“{”（左括号）开始，“}”（右括号）结束。每个“名称”后跟一个“:”（冒号）；“‘名称/值’ 对”之间使用“,”（逗号）分隔。
在这里插入图片描述

例子:

{"id":100,"name":"tomcat","age":18}

2.3.3 JSON结构数组array格式

数组（array） 是值（value）的有序集合。一个数组以“[”（左中括号）开始，“]”（右中括号）结束。值之间使用“,”（逗号）分隔。
在这里插入图片描述
例子:

[100,"张三","李四"]

2.3.4 JSON结构值value格式

值（value） 可以是双引号括起来的字符串（string）、数值(number)、true、false、 null、对象（object）或者数组（array）。这些结构可以嵌套。
在这里插入图片描述
例子:

[{"id":100,"name":"黑熊精"},
 {"id":200,"name":"吴亦凡",	
  "color":["白色","黑色","蓝色","红色"],
  "装备":[
  	{"name":"扇骨","level":"max"},
  	{"name":"骨扇","level":"max"}
  		 ]
  }
]

2.4 关于Ajax

2.4.1 Ajax介绍

Ajax即Asynchronous Javascript And XML（异步JavaScript和XML）在 2005年被Jesse James Garrett提出的新术语，用来描述一种使用现有技术集合的‘新’方法，包括: HTML 或 XHTML, CSS, JavaScript, DOM, XML, XSLT, 以及最重要的XMLHttpRequest。使用Ajax技术网页应用能够快速地将增量更新呈现在用户界面上，而不需要重载（刷新）整个页面，这使得程序能够更快地回应用户的操作。
特点:
1.局部刷新
2.异步访问

2.4.2 Ajax为什么可以异步

同步: 当用户发起请求时,如果后端服务器没有返回数据,此时用户的页面无法展示,一直处于加载状态(整个页面同时刷新)
异步: 用户发起请求时,要求服务器做出响应.在此期间用户可以做其它的操作.如果后端服务器返回数据则通过回调函数通知客户. 局部刷新多次.
在这里插入图片描述
异步原因:

用户将请求发送给ajax引擎,之后js继续向下执行.
Ajax引擎接收用户请求之后通过代理的方式访问后端服务器
后端服务器接收请求之后执行业务操作,之后将相应的结果返回给代理服务器(Ajax引擎)
引擎通过回调参数方式通知用户

2.4.3 jQuery下载

网址:https://jquery.com/
在这里插入图片描述
下载:

2.5 jQuery前后端调用

2.5.1 js中循环写法

1.基础循环写法

				for(var i;i<data.length;i++){
				console.log(data[i])	
				}

2.in关键字循环

				for(index in data){
					console.log(data[index])
				}

3.of关键字循环

				for(user of data){
					console.log(user)
				}

2.5.2 模板字符串

**说明:**模板字符串语法从ES5以后提供的
语法: 反引号
特点:
1.被反引号包裹的都是字符串,可以随意换行,保留代码结构
2.可以动态的从对象中取值语法: ${user.name }

				for(user of data){
				
				var str = `
				<tr align='center'>
				<td>${user.id}</td>
				<td>${user.name}</td>
				<td>${user.age}</td>
				<td>${user.sex}</td>
				</tr>`
				$("#a1").append(str)
				}

2.6 Ajax 获取远程数据

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>用户列表demo</title>
		<script src="jquery-3.6.0.min.js"></script>
		<script>
			// 函数式编程
			$(function(){
				/**
				 * 语法说明:
				 * $.get(url,data,function(data){},dataType)
				 * 参数说明:
				 * 1.url:请求服务器的网址
				 * 2.data:前端向服务器传递的参数,字符串
				 * 3.回调函数:请求成功后开始回调
				 * 4.dataType:返回值结果的数据类型
				 */
			var url="http://localhost:8090/getAll"
			/**
			 * 关于data语法: id=100 name=tom
			 * 1.JS对象的写法:  
			 *  {id:100,name:"tom"}
			 * 2.字符串拼接:
			 *  id=100&name=tom
			 */
			
			var data={id:100,name:"tom"}
			$.get(url,data,function(data){
				for(user of data){
				var str = `
				<tr align='center'>
				<td>${user.id}</td>
				<td>${user.name}</td>
				<td>${user.age}</td>
				<td>${user.sex}</td>
				</tr>
				`
				$("#a1").append(str)
				}
			})
			
			
			})
		</script>
		
	</head>
	<body>
		<table id="a1" border="1px" align="center" width="80%">
			<tr>
				<td colspan="4" align="center"><h1>用户的列表</h1></td>
			</tr>
			<tr>
				<td align="center">编号</td>
				<td align="center">姓名</td>
				<td align="center">年龄</td>
				<td align="center">性别</td>
			</tr>
			
		</table>
	</body>
</html>

小骄傲_倍儿坚强

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
java三阶段学习_day04

1 搭建后端完整结构1.1 后端的结构说明1.1.1 后端作用接收前端发送的数据.(接收) SpringMVC Controller按照用户的业务需求处理数据.(处理) Spring Service将处理之后的结果,按照特定的要求返回给用户(返回) SpringMVC Controller1.1.2 代码结构1.1.3 后端测试要求: 接收url 请求地址,之后json数据返回url: http://localhost:8090/getAll要求利用MP方式查询数据库1.1.4
复制链接

扫一扫