本文轉載自：http://www.youarebug.com/forum.php?mod=viewthread&tid=112&page=1&extra=#pid164
目錄第一課 Hello World！第二課 初始MVC第三課 URL及ajax-->本帖
第三課URL及ajax這節課講一下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 OnRewriteCond %{REQUEST_FILENAME} !-fRewriteCond %{REQUEST_FILENAME} !-dRewriteRule ^(.*)$ /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的重要性更加凸顯。第三課源代碼下載地址：
http://www.youarebug.com/forum.php?mod=viewthread&tid=112&page=1&extra=#pid164
新聞熱點
疑難解答
