CodeIgniter 入門教程第三課：URL 路由與 AJAX 互動實戰

CI URL 結構解析

example.com/index.php/controller/method/param1/param2/param3/

• index.php：前端控制器（可透過 .htaccess 隱藏）
• controller：控制器類別名
• method：公開方法名
• paramN：傳遞給方法的參數，依序對應

隱藏 index.php（Apache .htaccess）

RewriteEngine On
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteRule ^(.*)$ index.php/$1 [L]

瀏覽器直接訪問 example.com/controller/method/1/2/3，SEO 友好。

實戰：AJAX 計算器

1. 視圖

<!-- application/views/calculate_view.php -->
<h2>網頁計算器</h2>
<input type="text" id="num1" placeholder="數字1">
<select id="operate">
    <option value="add">+</option>
    <option value="sub">-</option>
    <option value="mul">×</option>
    <option value="div">÷</option>
</select>
<input type="text" id="num2" placeholder="數字2">
<button id="calc">計算</button>
<div id="result"></div>

<script src="https://cdn.jsdelivr.net/npm/jquery@3.6/dist/jquery.min.js"></script>
<script>
$('#calc').click(function() {
    $.post('', {
        num1: $('#num1').val(),
        operate: $('#operate').val(),
        num2: $('#num2').val()
    }, function(res) {
        $('#result').html('結果: ' + res);
    }, 'json');
});
</script>

2. 控制器

<?php
// application/controllers/Calculate.php
class Calculate extends CI_Controller
{
    public function index()
    {
        $this->load->view('calculate_view');
    }

    public function count()
    {
        $num1 = $this->input->post('num1');
        $op   = $this->input->post('operate');
        $num2 = $this->input->post('num2');

        if ($num1 === '' || $num2 === '' || $op === '') {
            echo json_encode(['error' => '參數不完整']);
            return;
        }

        $this->load->model('calculate_model');
        $result = $this->calculate_model->count($num1, $op, $num2);
        echo json_encode(['result' => $result]);
    }
}

3. 模型

<?php
// application/models/Calculate_model.php
class Calculate_model extends CI_Model
{
    public function count($a, $op, $b): float|string
    {
        switch ($op) {
            case 'add': return $a + $b;
            case 'sub': return $a - $b;
            case 'mul': return $a * $b;
            case 'div':
                if ($b == 0) return '除數不能為零';
                return $a / $b;
            default: return '未知運算子';
        }
    }
}

關鍵點總結

• CI 透過 $this->input->post() 統一獲取 POST/JSON 資料，自動處理 XSS 過濾
• AJAX 回應建議統一 JSON 格式：{success: bool, data: ..., message: ...}
• 路由設定在 application/config/routes.php，可自訂 RESTful 風格

下一步學習

1. 表單驗證 Library ($this->form_validation)
2. 資料庫 Active Record ($this->db)
3. Session / Cookie / 加密工具類