本文轉載自：http://www.softeng.cn/?p=74
這節課講一下CI
框架的路由規則，以及如何在CI
框架下實現ajax
功能。
首先，先介紹CI
框架的路由規則，因為CI
框架是在PHP
的基礎上發展而來的，所以在基本的路由規則中，和原生態的PHP
項目是相似的，但是CI
框架是符合MVC
框架的，在前兩節中也提到了，MVC
框架一般是以控制器作為程序入口，所以，使用CI
框架做出來的網站，其URL
都是控制器的地址，而視圖和模型的地址對於用戶來說是透明的。接下來先看看CI
的默認路由規則：
example.com/index.php/floder/class/function/id/
在上面的這個地址中：
example.com
表示網站的域名或IP
地址；
index.php
這個是PHP
路由中常見的，必須寫；
floder
表示的是控制器所處的文件夾，在一般的網站中，會有多個模塊，當功能較多、較復雜，代碼量較大時，會通過將不同的模塊對應的代碼放入不同的文件夾中，當出現這種情況時，路由中就需要寫清楚控制器所在的文件夾，對於直接放在控制器根目錄下的類（文件）則不需要這一級路由；
class
是控制器的類名，這里和PHP
路由不同，這里注意是類名，不是文件名；
function
是控制器中對應的函數名，如果是index
函數，則可以不寫；
id
這是要傳入
function
的參數，這里還應注意，當一個函數擁有參數時，即使是
index
函數，也要在
URL
中寫清楚，這里大家會發現，普通的
PHP
，如果通過
URL
傳參的話，應該是以問號開頭，然后是鍵值對的形式完成
get
方式傳參，但是在
CI
中，確是通過
/
符號，這就是
CI
自己的路由規則，有人可能會問，那如果是多個參數呢？很好辦，多個參數就繼續用
/
分割，比如現在有三個參數分別是
id1
，
id2
，
id3
，那么
URL
將是
example.com/index.php/floder/class/function/id1/id2/id3/
這就是CI
框架的默認路由規則，當然，既然有默認的，那就會有自定義的。
很多人會說，都已經是
MVC
框架了，為什么還要有那個
index.php
，大家還記得第一節課中講到的
CI
框架的目錄結構嗎？在其中可以看到在
CI
框架的根目錄下，有一個
index.php
，如下圖：
就是我標注為“網站默認頁面”的那個文件（其實這個文件並沒有輸出任何東西，而是大量的變量定義和環境檢測，然后跳轉去其他頁面），在URL
中的index.php
就是指他，但是像上面這樣的路由結構看起來多奇怪啊，如果能把那個index.php
去了，感覺明顯好多了，而且在也有助於SEO
優化（這是一個獨立的內容，這里不涉及），那么現在就動手來去了它吧！就在CI
框架的根目錄下，新建一個名為.htaccess
的文件，用記事本打開文件，然后在里面添加如下代碼：
RewriteEngine On
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteRule ^(.*)$ /CI_03/index.php/$1 [L]
大家注意看，最后一行代碼中出現了“CI_03
”，在這個位置，需要填入你的項目的根目錄名稱，比如，第一課的時候，這里應該寫CI_01
，第二課就寫CI_02
，這樣，就可以在URL
中去掉那個別扭的index.php
了。
除了能夠去掉index.php
，CI
的路由規則還能夠更加靈活的自定義，如果大家想了解更多內容，可以參看我在第一課中所共享的《CodeIgniter
框架API
手冊》的“常規主題”下的“URL
路由”一節，其中介紹了如何自定義的URL
規則。
講完了路由規則，接下來說一下在CI
框架下實現ajax
，下面的部分必須要有第二課的內容做為基礎才能看懂，如果你還沒有學習第二課，請先學習第二課后，再看下面的內容。
這部分內容，仍然是以一個簡單的計算器做為例子，相比較上節課的內容而言，使用ajax
后，將減少一個視圖（用於顯示結果的視圖），同時，可以實現無刷新的頁面更新，關於ajax
的基礎學習，可以參看《
基於PHP的AJAX學習筆記（教程）
》一文，該文為本人在學習ajax
過程中的學習筆記。
接下來，看看具體的代碼，這節課，所要實現的功能和上節課完全相同，所以，在上節課的代碼基礎上進行修改，首先還是從控制器改起，上節課里，是將整個式子以及其計算結果作為一個數組傳給另外一個數組，而本節課，因為使用ajax
的關系，只需要一個視圖，也就是上節課輸入算式的視圖即可完成，所以，需要修改Calculate
控制器里的count()
方法的內容，具體修改如下：
function count() { // 使用輸入類接收參數 $num1 = $this->input->post('num1'); $op = $this->input->post('operate'); $num2 = $this->input->post('num2'); if (is_numeric($num1) && is_numeric($num2)) { // 如果兩個數輸入均為數字，則調用calculate_model模型下的count方法 $result = $this->calculate_model->count($num1, $num2, $op); // 采用文本作為格式作為回傳值，所以直接返回結果 echo $result; }else { echo FALSE; } }
大家會發現，控制器的改動很小，而且比上節更加簡單了，這是因為計算的結果只是一個簡單的數字，所以這里我采用文本格式返回，當返回數據較多時，推薦采用xml
格式或json
格式，具體內容參看上面提到的《
基於PHP的AJAX學習筆記（教程）
》。
修改完控制器，現在要修改視圖了，在本課中，只有一個視圖，那就是calculate_view
視圖，同時，也是改動內容最大的一個部分。下面就來看看他的代碼是怎樣的：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>網頁計算器</title> <style type="text/css"> #calculators { margin: 10% auto; width:600px; border:1px solid #000; } </style> <script type="text/javascript"> var xmlhttp = null; function $(id) { return document.getElementById(id); } //創建ajax引擎 function getXMLHttpRequest() { var xmlhttp; try { //Firefox,Opera 8.0+, Safari xmlhttp = new XMLHttpRequest(); }catch (e) { //Internet Explorer try { xmlhttp = new ActiveXObject("Msxml12.XMLHTTP"); }catch (e) { try { xmlhttp = new ActiveXObject("Microsoft.XMLHTTP"); }catch (e) { alert("您的瀏覽器不支持AJAX！"); return false; } } } return xmlhttp; } function isubmit() { xmlhttp = getXMLHttpRequest(); //怎么判斷創建是否成功 if (xmlhttp) { //以post方式發送 var url = "index.php/calculate/count/"; var data = "num1="+$("num1").value+"&operate="+$("operate").value+"&num2="+$("num2").value; //打開請求 xmlhttp.open("post", url, true); //下面這句話是post方式發送時必須要 xmlhttp.setRequestHeader("Content-Type", "application/x-www-form-urlencoded"); //指定回調函數，指定的函數名一定不要帶括號 xmlhttp.onreadystatechange = deal; //發送請求 xmlhttp.send(data); } } function deal() { //取出從服務器返回的數據 if (xmlhttp.readyState == 4) { //取出值，根據返回信息的格式而定 $("result").value = xmlhttp.responseText; } } </script> </head> <body> <div id="calculators"> <form> <input type="text" name="num1" id="num1" /> <select name="operate" id="operate"> <option value="add">+</option> <option value="sub">-</option> <option value="mul">x</option> <option value="div">÷</option> </select> <input type="text" name="num2" id="num2" />= <input type="text" name="result" id="result" disabled="disabled" /> <input type="button" value="計算" onclick="isubmit()" /> </form> </div> </body> </html>
上面的代碼，只是實現了基本的ajax
功能，但是沒有進行任何輸入檢查，這樣的代碼是不安全的，也是不健壯的，但因為時間原因，本人不再就上面的代碼進行優化，感興趣的同學，可以自己嘗試優化代碼，已完成更加豐富的功能。
最后，來看看calculate_model
模型，其實模型中要求該的地方也非常少，同樣也只是count
函數而已，具體代碼如下：
function count($num1, $num2, $op) { if ($op == "add") { return $num1 + $num2; }else if ($op == "sub") { return $num1 - $num2; }else if ($op == "mul") { return $num1 * $num2; }else if ($op == "div" && $num2 != 0) { return $num1 / 1.0 / $num2; }else { return FALSE; } }
到這里，就已經通過ajax
技術和CI
框架實現了一個簡單的計算器。現在來總結一下ajax
的內容。
總結：其實CI
框架下的ajax
就是將ajax
請求接在控制器的函數上，然后由控制器的函數完成相關調用和操作，將結果返回ajax
的過程，通過這樣的方式，能夠有效提高頁面的加載效率，提高用戶體驗。尤其是在頁面數據量較大時，ajax
的重要性更加凸顯。
第三課源代碼下載地址：