野原家系統管理局

👔

廣志打卡系統

登入驗證

「廣志老師每天都要準時打卡，否則美冴會在家等著⋯」

login.js

$('#form-login').on('submit', function(e) {
  e.preventDefault();
  $.ajax({
    url: 'login.php',
    type: 'POST',
    data: { user, pass },
    dataType: 'json',
    success: function(res) {
      // res.status === 'ok' → 打卡成功
    }
  });
});

🔍

野原家戶籍查詢

資料查詢

「美冴：你查什麼？　小新：查看看我有沒有弟弟。」

search.js

$.ajax({
  url: 'query.php',
  type: 'GET',
  data: { id, type },
  dataType: 'json',
  beforeSend: function() {
    $('#result').html('查詢中…');
  },
  success: function(res) {
    $('#result').html(res.data);
  }
});

📋

春日部防衛隊留言板

動態新增 DOM

「隊員集合！有事留言，小新負責不讀。」

小白零食統計局

非同步計數

「每次偷吃一顆都要向後端回報，美冴說的。」

0

顆／今日零食配給

counter.js

$('#btn-inc').click(function() {
  $.post('counter.php',
    { action: 'inc' },
    function(res) {
      $('#counter-val').text(res.value);
    }, 'json'
  );
});

📝

加入防衛隊申請

表單驗證

「申請前先確認：你敢跟小新玩嗎？」

register.js ← 前端驗 → 再 AJAX

// ① 先驗前端
if (pwd.length < 6) {
  showError('密語太短啦！');
  return; // 根本不送 AJAX
}
// ② 驗過才送
$.ajax({ url: 'register.php',
  type: 'POST', data: formData,
  success: function(r) {
    // r.uid → 入隊成功
  }
});