今日冲刺内容:
代码:
登录界面
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="https://cdn.tailwindcss.com"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.7.2/css/all.min.css" rel="stylesheet">
<title>登录界面</title>
<style>
/* 添加自定义动画 */
.animate-fade-in {
animation: fadeIn 0.5s ease-in-out;
}
@keyframes fadeIn {
from {
opacity: 0;
transform: translateY(-20px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
/* 按钮悬停动画 */
.hover:scale-105 {
transition: transform 0.3s ease;
}
</head>
</body>
主功能界面
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="https://cdn.tailwindcss.com"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.7.2/css/all.min.css" rel="stylesheet">
<title>培训管理系统 - 首页</title>
<style>
body {
font-family: 'Inter', sans-serif;
}
</style>
</head>
功能列表
</body>
学习内容:
1.JSON基础
JSON语法:对象、数组、键值对
JSON与JavaScript对象互转:
// JSON字符串转对象
let obj = JSON.parse('{"name":"John","age":30}');
// 对象转JSON字符串
let jsonStr = JSON.stringify({name: "John", age: 30});
2.AJAX深入
jQuery AJAX方法:
$.ajax({
url: "data.php",
method: "POST",
data: {username: "test"},
dataType: "json",
success: function(response) {
console.log(response.name);
},
error: function() {
alert("请求失败");
}
});
处理JSONP跨域请求
我的收获
掌握JSON数据格式和处理方法
学会使用AJAX实现异步数据交互