CodeIgniter框架入門教程——第三課 URL及ajax
阿新 • • 發佈：2019-01-31
這節課講一下CI框架的路由規則，以及如何在CI框架下實現ajax功能。
首先，先介紹CI框架的路由規則，因為CI框架是在PHP的基礎上發展而來的，所以在基本的路由規則中，和原生態的PHP專案是相似的，但是CI框架是符合MVC框架的，在前兩節中也提到了，MVC框架一般是以控制器作為程式入口，所以，使用CI框架做出來的網站，其URL都是控制器的地址，而檢視和模型的地址對於使用者來說是透明的。接下來先看看CI的預設路由規則：
在上面的這個地址中： example.com表示網站的域名或IP地址； index.php這個是
這就是CI框架的預設路由規則，當然，既然有預設的，那就會有自定義的。 很多人會說，都已經是MVC框架了，為什麼還要有那個index.php，大家還記得第一節課中講到的CI框架的目錄結構嗎？在其中可以看到在CI框架的根目錄下，有一個 
就是我標註為“網站預設頁面”的那個檔案（其實這個檔案並沒有輸出任何東西，而是大量的變數定義和環境檢測，然後跳轉去其他頁面），在URL中的index.php就是指他，但是像上面這樣的路由結構看起來多奇怪啊，如果能把那個index.php去了，感覺明顯好多了，而且在也有助於SEO優化（這是一個獨立的內容，這裡不涉及），那麼現在就動手來去了它吧！就在CI框架的根目錄下，新建一個名為.htaccess的檔案，用記事本開啟檔案，然後在裡面新增如下程式碼：
大家注意看，最後一行程式碼中出現了“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()方法的內容，具體修改如下：
大家會發現，控制器的改動很小，而且比上節更加簡單了，這是因為計算的結果只是一個簡單的數字，所以這裡我採用文字格式返回，當返回資料較多時，推薦採用xml格式或json格式，具體內容參看上面提到的《基於PHP的AJAX學習筆記（教程）》。
修改完控制器，現在要修改檢視了，在本課中，只有一個檢視，那就是calculate_view檢視，同時，也是改動內容最大的一個部分。下面就來看看他的程式碼是怎樣的：
上面的程式碼，只是實現了基本的ajax功能，但是沒有進行任何輸入檢查，這樣的程式碼是不安全的，也是不健壯的，但因為時間原因，本人不再就上面的程式碼進行優化，感興趣的同學，可以自己嘗試優化程式碼，已完成更加豐富的功能。
最後，來看看calculate_model模型，其實模型中要求該的地方也非常少，同樣也只是count函式而已，具體程式碼如下：
到這裡，就已經通過ajax技術和CI框架實現了一個簡單的計算器。現在來總結一下ajax的內容。
總結：其實CI框架下的ajax就是將ajax請求接在控制器的函式上，然後由控制器的函式完成相關呼叫和操作，將結果返回ajax的過程，通過這樣的方式，能夠有效提高頁面的載入效率，提高使用者體驗。尤其是在頁面資料量較大時，ajax的重要性更加凸顯。
首先，先介紹CI框架的路由規則，因為CI框架是在PHP的基礎上發展而來的，所以在基本的路由規則中，和原生態的PHP專案是相似的，但是CI框架是符合MVC框架的，在前兩節中也提到了，MVC框架一般是以控制器作為程式入口，所以，使用CI框架做出來的網站，其URL都是控制器的地址，而檢視和模型的地址對於使用者來說是透明的。接下來先看看CI的預設路由規則：
example.com/index.php/floder/class/function/id/在上面的這個地址中： example.com表示網站的域名或IP地址； index.php這個是
example.com/index.php/floder/class/function/id1/id2/id3/這就是CI框架的預設路由規則，當然，既然有預設的，那就會有自定義的。 很多人會說，都已經是MVC框架了，為什麼還要有那個index.php，大家還記得第一節課中講到的CI框架的目錄結構嗎？在其中可以看到在CI框架的根目錄下，有一個
就是我標註為“網站預設頁面”的那個檔案（其實這個檔案並沒有輸出任何東西，而是大量的變數定義和環境檢測，然後跳轉去其他頁面），在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的重要性更加凸顯。
第三課原始碼下載地址：