当前位置： 代码迷 >> Ajax >> 军哥路CI框架之讲述一个简单的Ajax请求
  详细解决方案

军哥路CI框架之讲述一个简单的Ajax请求

热度：386   发布时间：2012-09-13 09:51:53.0
军哥谈CI框架之讲述一个简单的Ajax请求
Hi，早上好，我是军哥，新的一天又开始啦，首先祝大家呢这一天的工作和学习顺顺利利，开开心心~~军哥今天想分享一下CI框架中有关Ajax的一个简单应用（详见代码示例代码示例 CI_ajax.rar ），相信有许多的初学者对CI中怎样使用Ajax会比较纠结和迷茫，但又非常让你有兴趣，毕竟通过Ajax,你可以创建更好、更快以及更友好的WEB应用程序，谁不想自己写的程序足够友好呢，嘿嘿，更何况这是一个以用户为王的时代！


CI中有为我们提供封装好的Ajax类库，个人建议是尽量不使用，因为使用CI封装好的，你就得遵循它要求的格式去写，这样就更让初学者更加糊涂。


接下来就具体来讲这个AJAX简单应用――书籍列表页中当点击书籍名称时实现Ajax请求弹出书籍详情对话框的无刷新效果。还是跟上次一样，军哥还是在代码中继续使用bootstarp前端UI框架来实现页面效果。另外还用到了峰哥的独家秘笈――Ajax3.0。

废话不说，还是老套路，直接上代码，欢迎拍砖赐教~~
1、首先看效果，有图有真相，天凉好个秋；
书籍列表页：

弹出框效果：


2、控制器（源码在 application/controllers/manage文件夹）；
if (!defined('BASEPATH'))
  1. exit('No direct script access allowed');
  2. /**
  3. *书籍管理控制器，只实现书籍列表显示功能
  4. * @author jayjun
  5. * @copyright 2012.09.03
  6. */
  7. class book extends CI_Controller {
  8. // 初始化
  9. function __construct() {
  10. parent::__construct();
  11. $this->base_url = $this->config->item("base_url");
  12. $this->load->model('M_book');
  13. }
  14. //书籍列表页
  15. function index($num = '') {
  16. // 加载分页类
  17. $this->load->library('pagination');
  18. $config['base_url'] = $this->base_url.'/index.php/manage/book/index/';
  19. $config['total_rows'] = $this->M_book->count('back');
  20. $config['per_page'] = 2;
  21. $config['num_links'] = 3;
  22. $config['uri_segment'] = 4;
  23. $config['full_tag_open'] = '<p class="pagination">';
  24. $config['full_tag_close'] = '</p>';
  25. $config['first_link'] = '首页';
  26. $config['last_link'] = '末页';
  27. $config['next_link'] = '下一页 >';
  28. $config['prev_link'] = '< 上一页';
  29. $config['cur_tag_open'] = ' <a class="pagination-active">';
  30. $config['cur_tag_close'] = '</a>';
  31. $this->pagination->initialize($config);
  32. $data['list'] = $this->M_book->get('back', $config['per_page'], $num);
  33. $data['page'] = array(
  34. 'total' => $config['total_rows'],
  35. 'num' => $config['per_page'],
  36. 'page' => (int) (($config['total_rows'] % $config['per_page'] === 0) ? ($config['total_rows'] / $config['per_page']) : ($config['total_rows'] / $config['per_page'] + 1)),
  37. 'c_num' => $num
  38. );
  39. $data['base_url'] = $this->base_url;
  40. $this->load->view("manage/book_index",$data);
  41. }
  42. //获取书籍详情
  43. function post() {
  44. $data['base_url'] = $this->base_url;
  45. $id = $this->input->post('id');
  46. $query = $this->M_book->post($id);
  47. $data['post'] = $query->row_array();
  48. $this->load->view('manage/book_info', $data);
  49. }
  50. }

3、模型（源码在 application/models文件夹）
if (!defined('BASEPATH'))
  1. exit('No direct script access allowed');
  3. /**
  4. *书籍Model类
  5. * @author jayjun
  6. * @copyright 2012.09.03
  7. */
  9. class M_book extends CI_Model {
  11. //获取书籍信息
  12. function get($type,$num,$offset) {
  13. $data = '';
  14. switch ($type) {
  15. case 'back':
  16. $this->db->select('BookId,Tid,BookName,BookDesc,Price,MemberPrice,BookPic,Bstatus,Total,BuyNum,IsPush,IsHot,IsNew,AddTime,TagList');
  17. $data = $this->db->get('book', $num, $offset);
  18. break;
  19. }
  20. return $data;
  21. }
  23. // 获取书籍信息，$id
  24. function post($id) {
  25. return $query = $this->db->get_where('book', array('BookId' => $id));
  26. }
  28. // 统计书籍数量
  29. function count($type) {
  30. $data = '';
  31. switch ($type) {
  32. default:
  33. case 'back':
  34. $data = $this->db->count_all_results('book');
  35. break;
  36. }
  37. return $data;
  38. }
  41. }
4、视图（源码在 application/views/manage文件夹）
书籍列表视图（book_index.php）：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  1. <html xmlns="http://www.w3.org/1999/xhtml">
  2. <head>
  3. <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
  4. <title>书籍列表</title>
  5. <link rel="stylesheet" href="<?php echo $base_url; ?>/public/css/base.css" type="text/css" />
  6. <link rel="stylesheet" href="<?php echo $base_url; ?>/bootstrap/css/bootstrap.min.css" type="text/css" />
  7. <script type="text/javascript" src="<?php echo $base_url; ?>/public/scripts/jquery-1.7.1.min.js"></script>
  8. <script type="text/javascript" src="<?php echo $base_url; ?>/public/scripts/ajax3.0.js"></script>
  9. <script type="text/javascript" src="<?php echo $base_url; ?>/bootstrap/js/bootstrap.min.js"></script>
  10. </head>
  11. <body>
  12. <h1 class="mb20">书籍列表</h1>
  13. <div>
  14. <div>
  15. <p> 每页 <b><?php echo $page['num']; ?></b> 条 / 当前 <b><?php echo $count = $page['c_num'] + 1; ?> ~ <?php echo $page['c_num'] + $list->num_rows; ?></b> 条 / 计 <b><?php echo $page['page']; ?></b> 页 / 共 <b><?php echo $page['total']; ?></b> 条</p>
  16. </div>
  17. <div>
  18. <?php echo $this->pagination->create_links(); ?>
  19. </div>
  20. </div>
  21. <?php echo form_open();?>
  22. <table class="table bc table-bordered">
  23. <thead>
  24. <tr>
  25. <th width="10px"><input type="checkbox" /></th>
  26. <th width="8px">编号</th>
  27. <th width="130px">书籍名</th>
  28. <th width="100px">书籍封面</th>
  29. <th width="43px">市场价</th>
  30. <th width="43px">会员价</th>
  31. <th width="40px">库存</th>
  32. <th width="40px">销量</th>
  33. <th width="90px">添加时间</th>
  34. <th width="40px">状态</th>
  35. <th width="60px">操作</th>
  36. </tr>
  37. </thead>
  38. <tbody>
  39. <?php
  40. if ($list->num_rows === 0)
  41. {
  42. echo '<tr><td colspan="11">暂无书籍</td></tr>';
  43. }
  44. else
  45. {
  46. foreach ($list->result() as $item):
  47. ?>
  48. <tr>
  49. <td class="fc">
  50. <input type="checkbox" name="BookId[]" value="<?php echo $item->BookId; ?>" />
  51. </td>
  52. <td width="10px"><?php echo $count++; ?></td>
  53. <td>
  54. <a href="#" id="<?php echo $item->BookId; ?>" class="js_book"><?php echo $item->BookName; ?></a>
  55. </td>
  56. <td><img src="<?php echo $base_url; ?>/uploads/book/<?php echo $item->BookPic;?>" height="80px" width="60px"></td>
  57. <td><?php echo $item->Price;?></td>
  58. <td><?php echo $item->MemberPrice;?></td>
  59. <td><?php echo $item->Total;?></td>
  60. <td><?php echo $item->BuyNum;?></td>
  61. <td><?php echo date("Y-m-d h:i:s",$item->AddTime); ?></td>
  62. <td><?php echo ($item->Bstatus === '0') ? '待审' : '正常'; ?></td>
  63. <td>
  64. <a href="#">
  65. <img src="<?php echo $base_url; ?>/public/images/icons/user_edit.png" title="编辑" width="16" height="16" />
  66. </a>
  67. <a href="#" onclick="return confirmAct();">
  68. <img src="<?php echo $base_url; ?>/public/images/icons/user_delete.png" title="删除" width="16" height="16" />
  69. </a>
  70. </td>
  71. </tr>
  72. <?php
  73. endforeach;
  74. }
  75. ?>
  76. </tbody>
  77. <tfoot>
  78. <tr>
  79. <td colspan="11"><input type="submit" class="btn btn-primary" value="删除" /></td>
  80. </tr>
  81. </tfoot>
  82. </table>
  83. <?php echo form_close();?>
  84. <div id="js_book">
  86. </div>
  88. <script type="text/javascript">
  89. $(function(){
  90. //点击书籍名称触发事件
  91. $(".js_book").live('click',function(){
  92. var BookId = $(this).attr("id");
  93. //实例化Ajax类
  94. var ajax = new Ajax();
  95. ajax.post("<?php echo site_url('manage/book/post');?>",{id:BookId},function(data){
  96. $("#js_book").html(data);
  97. });
  98. });
  99. //点击书籍详细信息对话框中的关闭按钮所触发事件
  100. $('.js_bookClose').live('click',function(){
  101. $('#bookModal').hide();//点击关闭按钮触发隐藏事件
  102. });
  103. });
  104. </script>
  105. </body>
  106. </html>


加载的弹出框视图（book_info.php）：
<!-- 书籍详细信息对话框开始 -->
  1. <div class="modal in" id="bookModal">
  2. <div class="modal-header">
  3. <a class="js_bookClose close">×</a>
  4. <h3>《<span><?php echo $post['BookName'] ?></span>》详细参数</h3>
  5. </div>
  6. <div class="modal-body">
  7. <table class="table table-condensed table-bordered mt20">
  8. <tbody>
  9. <tr>
  10. <td width="15%">书籍名称：</td>
  11. <td><?php echo $post['BookName']; ?></td>
  12. <td rowspan="7" width="30%"><img src="<?php echo $base_url; ?>/uploads/book/<?php echo $post['BookPic'];?>"/></td>
  13. </tr>
  14. <tr>
  15. <td>市场价：</td>
  16. <td>￥ <?php echo $post['Price']; ?></td>
  17. </tr>
  18. <tr>
  19. <td>会员价：</td>
  20. <td>￥ <?php echo $post['MemberPrice']; ?></td>
  21. </tr>
  22. <tr>
  23. <td>库存量：</td>
  24. <td><?php echo $post['Total']; ?>本</td>
  25. </tr>
  26. <tr>
  27. <td>是否推荐：</td>
  28. <td><?php echo ($post['IsPush'] == 0) ? "否" : "是"; ?></td>
  29. </tr>
  30. <tr>
  31. <td>是否热门：</td>
  32. <td><?php echo ($post['IsHot'] == 0) ? "否" : "是"; ?></td>
  33. </tr>
  34. <tr>
  35. <td>是否最新：</td>
  36. <td><?php echo ($post['IsNew'] == 0) ? "否" : "是"; ?></td>
  37. </tr>
  38. <tr>
  39. <td>书籍描述：</td>
  40. <td><?php echo $post['BookDesc']; ?></td>
  41. </tr>
  42. </tbody>
  43. </table>
  44. </div>
  45. <div class="modal-footer">
  46. <a class="btn js_bookClose" >关闭</a>
  47. </div>
  48. </div>
  49. <!-- 书籍详细信息对话框结束 -->

5、应用
（1）、先下载附件，解压之后，拷贝至网站根目录下；
（2）、找到文件ci_ajax.sql，建库建表；
（3）、修改配置文件CI_cate/application/config/database.php，只需设置$db['default']['password'] ='你的数据库密码'; ，大概在第10行；
（4）、浏览器输入http://localhost/CI_ajax/index.php/manage/book/index即可访问书籍列表显示页啦，点击书籍名称即可弹出书籍详情对话框。



  相关解决方案

代码迷 - 您身边的软件异常，代码异常，编程异常助手（发现，解决，分享）
Copyright © 2009-2013 DAIMAMI.COM. All rights reserved.