CodeIgniter框架入門教程——第三課 URL及ajax

時間 2019-11-18

標籤 codeigniter 框架入門教程第三 url ajax 欄目 Apache 简体版

原文原文鏈接

本文轉載自：http://www.softeng.cn/?p=74javascript

這節課講一下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;
        }
}