CodeIgniter框架入门教程——第三课 URL及ajax

最新推荐文章于 2020-07-23 03:53:50 发布

faith瑞诚

最新推荐文章于 2020-07-23 03:53:50 发布

阅读量2.7k

点赞数 3

分类专栏： PHP CI(CodeIgniter)框架入门教程文章标签： PHP CI CodeIgniter ajax 教程

PHP CI(CodeIgniter)框架入门教程专栏收录该内容

4 篇文章 2 订阅

订阅专栏

本文转载自：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="计算" οnclick="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.softeng.cn/?p=74