Skip to content

Instantly share code, notes, and snippets.

@summer10920

summer10920/api.php Secret

Last active September 20, 2021 03:00
Show Gist options
  • Star 1 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save summer10920/e70cd0ce7380fc9f89a92059feb8b46a to your computer and use it in GitHub Desktop.
Save summer10920/e70cd0ce7380fc9f89a92059feb8b46a to your computer and use it in GitHub Desktop.
Download ZIP
jQuery 基本練習 (乙級題目 Ajax 系列)
Raw
api.php
<?php
/*q3t8 start*/
$movieName = array(
array("id" => 1, "movie" => "電影名稱A"),
array("id" => 2, "movie" => "電影名稱B"),
array("id" => 3, "movie" => "電影名稱C"),
);
$movieDay = array(
array("id" => 1, "movieName" => 1, "date" => "2020-05-05"),
array("id" => 2, "movieName" => 1, "date" => "2020-05-06"),
array("id" => 3, "movieName" => 2, "date" => "2020-05-06"),
array("id" => 4, "movieName" => 2, "date" => "2020-05-07"),
array("id" => 5, "movieName" => 3, "date" => "2020-05-07"),
array("id" => 6, "movieName" => 3, "date" => "2020-05-08")
);
$movieOrder = array(
array("id" => 1, "movieDay" => 1, "time" => 2, "sellout" => 2),
array("id" => 2, "movieDay" => 1, "time" => 2, "sellout" => 2),
array("id" => 3, "movieDay" => 1, "time" => 3, "sellout" => 2),
array("id" => 4, "movieDay" => 1, "time" => 4, "sellout" => 2),
array("id" => 5, "movieDay" => 2, "time" => 1, "sellout" => 2),
array("id" => 6, "movieDay" => 2, "time" => 3, "sellout" => 2),
array("id" => 7, "movieDay" => 2, "time" => 3, "sellout" => 2),
array("id" => 8, "movieDay" => 3, "time" => 1, "sellout" => 2),
array("id" => 9, "movieDay" => 3, "time" => 2, "sellout" => 2),
array("id" => 10, "movieDay" => 3, "time" => 3, "sellout" => 2),
array("id" => 11, "movieDay" => 4, "time" => 1, "sellout" => 2),
array("id" => 12, "movieDay" => 4, "time" => 2, "sellout" => 2),
array("id" => 13, "movieDay" => 4, "time" => 3, "sellout" => 2),
array("id" => 14, "movieDay" => 5, "time" => 1, "sellout" => 2),
array("id" => 15, "movieDay" => 5, "time" => 2, "sellout" => 2),
array("id" => 16, "movieDay" => 5, "time" => 3, "sellout" => 2),
array("id" => 17, "movieDay" => 6, "time" => 1, "sellout" => 2),
array("id" => 18, "movieDay" => 6, "time" => 2, "sellout" => 2),
);
/*q4t7 start*/
$account = array(
array("id" => 1, "acc" => "admin", "pwd" => "1234"),
array("id" => 2, "acc" => "loki", "pwd" => "4321")
);
/*database end*/
switch ($_GET['do']) {
case 'getmovie':
//這裡將提供JSON給前端，由前端來處理DOM (JSON_UNESCAPED_UNICODE能確保中文，非必要因HTML能正常顯示unicode)
echo json_encode($movieName, JSON_UNESCAPED_UNICODE);
break;
case 'getdate':
$result = array();
foreach ($movieDay as $row) if ($row['movieName'] == $_GET['id']) array_push($result, $row);
echo json_encode($result, JSON_UNESCAPED_UNICODE);
break;
case 'gettime':
$result = array();
foreach ($movieOrder as $row) if ($row['movieDay'] == $_GET['id']) array_push($result, $row);
echo json_encode($result, JSON_UNESCAPED_UNICODE);
break;
case 'checkuser':
$flag = false;
foreach ($account as $row) if ($row['acc'] == $_POST['acc']) {
$flag = true;
break;
}
if ($flag) echo "帳號重複";
else echo "可使用此帳號";
break;
}
Raw
q3t8.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="https://code.jquery.com/jquery-3.5.0.min.js"></script>
</head>
<body>
<form>
電影：<select name="mm" id="sm" onchange="gd()"></select>
日期：<select name="dd" id="sd" onchange="gt()"></select>
場次：<select name="tt" id="st"></select>
<input type="submit" value="確定">
</form>
<script>
/* 資料初始化 */
// $.getJSON("q3t8_api.php?do=getmovie",function(result){
// console.log(typeof(result));
// });
$.get("q3t8_api.php", { "do": "getmovie" }, function (result) {
console.log(typeof (result)); //$.get拿到的是字串而不是物件，所以還要轉檔一下，或者使用$.getJSON方式取得
result = JSON.parse(result);
let content = "";
for (const row of result) {
content += `<option value="${row["id"]}">${row["movie"]}</option>`;
}
$("#sm").html(content);
gd();
});
/*根據目前所選之電影，進行可販售日期*/
function gd() {
let mv = $("#sm").val();
$.get("q3t8_api.php", { "do": "getdate", "id": mv }, function (result) {
result = JSON.parse(result);
let content = "";
for (const row of result) content += `<option value="${row["id"]}">${row["date"]}</option>`;
$("#sd").html(content);
gt();
});
}
/*根據目前所選之電影與販售日期，進行票數之計算*/
function gt() {
let dv = $("#sd").val();
$.get("q3t8_api.php", { "do": "gettime", "id": dv }, function (result) {
result = JSON.parse(result);
/*由於後端給的資料為結果之全數據，所以我們要自己計算各場次之剩餘座位*/
//各時段的總銷售數初始化
let time = [
{ txt: "10:00~12:00", ticketlast: 20 },
{ txt: "12:00~14:00", ticketlast: 20 },
{ txt: "14:00~16:00", ticketlast: 20 },
{ txt: "16:00~18:00", ticketlast: 20 },
{ txt: "18:00~20:00", ticketlast: 20 },
{ txt: "20:00~22:00", ticketlast: 20 },
{ txt: "22:00~24:00", ticketlast: 20 }
];
for (const row of result) {
time[row['time'] - 1].ticketlast -= row['sellout'];
}
let content = "";
let count = 0;
let nowTime = new Date();
//10=>1, 11=>1, 12=>2, 13=>2, 14=>3, ~~> x=>y | y = (x/2)無條件捨去 - 4
let TimetoNun = Math.floor(nowTime.getHours() / 2) - 4;
let selectDayA = new Date($("#sd option:selected").text()).toDateString();
//toDateString() => Thu May 07 2020
for (const row of time) {
count++;
if (count <= TimetoNun && selectDay == nowTime.toDateString()) continue;
// like <option value="2">12:00~14:00 剩餘座位 5 </option>
content += `<option value="${count}">${row.txt} 剩餘座位 ${row.ticketlast} </option>`;
}
$("#st").html(content);
});
}
</script>
</body>
</html>
Raw
q4t7.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="https://code.jquery.com/jquery-3.5.0.min.js"></script>
</head>
<body>
<h3>註冊帳號</h3>
<form method="get" onsubmit="return checkflag()">
姓名：<input type="text" name="name" id=""><br>
帳號：<input type="text" name="acc" onchange="flag=0"><input type="button" value="檢測帳號" onclick="check()"><br>
密碼：<input type="text" name="pwd" id=""><br>
<input type="submit" value="確認">
</form>
<script>
var flag = 0; //0=未檢測，1=已檢測
function check() {
let acc = $("input[name=acc]").val();
$.post("api.php?do=checkuser", { acc }, function (re) {
alert(re);
flag = (re == "可使用此帳號") ? 1 : 0;
});
}
function checkflag() {
if (!flag) {
alert("請先驗證帳號");
return false;
}
}
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment