第二十八天
一、JS应用-原生态开发&第三库开发
1.参考
-
原生JS教程https://www.w3school.com.cn/js/index.asp
-
jQuery库教程https://www.w3school.com.cn/jquery/index.asp
二、JS功能-文件上传&登录验证&商品购买
1.JS原生开发-文件上传-变量&对象&函数&事件
- 布置前端页面
- JS获取提交数据
- JS对上传格式判断
- 后端对上传数据处理
前端JS进行后缀过滤，后端PHP进行上传处理
架构：html js php - upload.php
2.安全问题：
- 过滤代码能看到分析绕过
- 禁用JS或删除过滤代码绕过
3.JS导入库开发-登录验证-JQuery库&Ajax技术
- 布置前端页面
- 获取登录事件
- 配置Ajax请求
- 后端代码验证
- 成功回调判断
后端PHP进行帐号判断，前端JS进行登录处理
架构：html js login.html - logincheck.php
4.JS导入库开发-逻辑购买-JQuery库&Ajax技术
- 布置前端页面
- 获取登录事件
- 配置Ajax请求
- 后端代码验证
- 成功回调判断
架构：html js shop.html - shopcheck.php
三、环境复现
1.使用JavaScript实现文件上传
<!-- 表单用于文件上传，指定了上传的目标地址为 "upload.php"，使用 POST 方法提交，并设置 enctype 为 "multipart/form-data" -->
<form action="upload.php" method="POST" enctype="multipart/form-data">
<!-- 为文件上传输入框添加标签 -->
<label for="file">选择文件:</label>
<br>
<!-- 这是一个包含文件上传输入框的 HTML 代码，并且在用户选择文件时触发 CheckFileExt 函数 -->
<input type="file" id="file" name="f" onchange="CheckFileExt(this.value)">
<br>
<!-- 提交按钮 -->
<button type="submit">上传文件</button>
</form>
2.前端JavaScript进行后缀过滤，后端PHP进行上传处理
<script>
// JavaScript 函数 CheckFileExt 用于检查文件后缀名
function CheckFileExt(filename){
var flag = false;
// 允许的文件后缀名数组
var exts = ['png', 'gif', 'jpg'];
// 获取文件名中最后一个点后面的部分，即文件的后缀名
var index = filename.lastIndexOf('.');
var ext = filename.substr(index + 1);
// 遍历允许的文件后缀名数组
for (var i = 0; i < exts.length; i++) {
// 检查是否匹配允许的后缀名
if (ext === exts[i]) {
// 文件后缀名正确，设置 flag 为 true，显示提示信息，并跳出循环
flag = true;
alert('文件后缀名正确');
break;
}
}
// 如果 flag 为 false，表示文件后缀名错误，显示错误提示，并强制刷新页面
if (!flag) {
alert('文件后缀错误！')
location.reload(true);
}
}
</script>
3.Ajax技术
$.ajax({
url: "example.com/data", // 请求的URL
method: "GET", // HTTP请求方法（GET、POST等）
data: { // 发送到服务器的数据（可选）
param1: "value1",
param2: "value2"
},
success: function(response) { // 请求成功时的回调函数
console.log("请求成功！");
console.log(response); // 服务器响应的数据
},
error: function(xhr, status, error) { // 请求失败时的回调函数
console.log("请求失败！");
console.log(error); // 错误信息
}
});
4.使用JavaScript实现登陆验证
<div class="login">
<!-- 登录标题 -->
<h2>后台登录</h2>
<!-- 用户名标签和输入框 -->
<label for="username">用户名:</label>
<input type="text" name="username" id="username" class="user">
<!-- 密码标签和输入框 -->
<label for="password">密码:</label>
<input type="password" name="password" id="password" class="pass">
<!-- 登录按钮 -->
<button>登录</button>
</div>
**<!-- 引入 jQuery 库 -->
<script src="js/jquery-1.12.4.js"></script>**
<!-- JavaScript 代码 -->
<script>
// 当按钮被点击时执行以下函数
$("button").click(function (){
// 使用 AJAX 发送 POST 请求到 'logincheck.php'
$.ajax({
type: 'POST',
url: 'logincheck.php',
// 发送的数据包括用户名和密码
data: {
myuser: $('.user').val(),
mypass: $('.pass').val()
},
**// 请求成功时执行的函数
success: function (res){
console.log(res);
// 如果返回的信息代码为1，表示登录成功，弹出提示并执行相应的处理
if(res['infoCode'] == 1){
alert('登录成功');
// 登录成功处理事件（注释部分为示例，可根据需要进行处理）
// location.href='index.php';
} else {
// 如果信息代码不为1，表示登录失败，弹出失败提示
alert('登录失败');
}
},**
// 指定返回的数据类型为 JSON
dataType: 'json',
});
});
</script>
<?php
// 从 POST 请求中获取用户提交的用户名和密码
$user = $_POST['myuser'];
$pass = $_POST['mypass'];
// 真实情况下，应该在数据库中进行验证获取用户信息
// 假设用户名是 'xiaodi'，密码是 '123456'
**//$success 是一个关联数组变量，通过使用 'msg' 作为键，将 'ok' 作为值存储在其中。
$success = array('msg' => 'ok');**
// 检查用户名和密码是否匹配
if ($user == 'xiaodi' && $pass == '123456') {
// 如果匹配，设置信息代码为1表示登录成功，并进行相应的处理
$success['infoCode'] = 1;
} else {
// 如果不匹配，设置信息代码为0表示登录失败
$success['infoCode'] = 0;
}
**// 将结果以 JSON 格式输出
//必须要回调输出，不然前端无法获取infocode的值
echo json_encode($success);**
?>
5.使用JavaScript实现商品购买
<!DOCTYPE html>
<html lang="en">
<head>
<!-- 设置文档的字符集为UTF-8 -->
<meta charset="UTF-8">
<!-- 设置页面标题 -->
<title>商品购买</title>
</head>
<body>
<!-- 商品图片 -->
<img src="iphone.jpg" width="300" height="300" alt=""><br>
<!-- 当前拥有的金钱 -->
金钱：10000<br>
<!-- 商品价格 -->
商品价格：8888<br>
<!-- 输入购买数量的文本框 -->
数量：<input type="text" name="number" class="number">
<!-- 购买按钮 -->
<button>购买</button>
</body>
</html>
<!-- 引入 jQuery 库 -->
<script src="js/jquery-1.12.4.js"></script>
<!-- JavaScript 代码 -->
<script>
// 当购买按钮被点击时执行以下函数
$("button").click(function (){
// 使用 AJAX 发送 POST 请求到 'shop.php'
**$.ajax({
type: 'POST',
url: 'shop.php',
// 发送的数据，包括购买数量
data: {
num: $('.number').val(),
},
// 请求成功时执行的函数
success: function (res){
// 在控制台输出返回的数据
console.log(res);
// 如果返回的信息代码为1，表示购买成功
if(res['infoCode'] == 1){
// 弹出成功提示
alert('购买成功');
// 购买成功的流程（你可以在这里添加额外的处理）
} else {
// 如果信息代码不为1，表示购买失败
// 弹出失败提示
alert('购买失败');
}
},
// 指定返回的数据类型为 JSON
dataType: 'json',
});**
});
</script>
<?php
// 从 POST 请求中获取购买数量
$num = $_POST['num'];
// 假设购物车中已有的金钱数为10000，商品价格为8888
// 真实情况下，应该在数据库中获取用户的金钱数等信息
// 初始化一个关联数组变量，通过使用 'msg' 作为键，将 'ok' 作为值存储在其中。
$success = array('msg' => 'ok');
**// 检查购买是否合法（金钱是否足够支付）
if (10000 >= ($num * 8888)) {
// 如果购买合法，设置信息代码为1表示购买成功
$success['infoCode'] = 1;
} else {
// 如果购买不合法，设置信息代码为0表示购买失败
$success['infoCode'] = 0;
}
// 将结果以 JSON 格式输出
echo json_encode($success);**
?>
