军哥路CI框架之讲述一个简单的Ajax请求
军哥谈CI框架之讲述一个简单的Ajax请求Hi,早上好,我是军哥,新的一天又开始啦,首先祝大家呢这一天的工作和
军哥谈CI框架之讲述一个简单的Ajax请求
Hi,早上好,我是军哥,新的一天又开始啦,首先祝大家呢这一天的工作和学习顺顺利利,开开心心~~军哥今天想分享一下CI框架中有关Ajax的一个简单应用(详见代码示例
弹出框效果:
2、控制器(源码在 application/controllers/manage文件夹);
if (!defined('BASEPATH'))
exit('No direct script access allowed');/***书籍管理控制器,只实现书籍列表显示功能* @author jayjun* @copyright 2012.09.03*/class book extends CI_Controller {// 初始化function __construct() {parent::__construct();$this->base_url = $this->config->item("base_url");$this->load->model('M_book');}//书籍列表页function index($num = '') {// 加载分页类$this->load->library('pagination');$config['base_url'] = $this->base_url.'/index.php/manage/book/index/';$config['total_rows'] = $this->M_book->count('back');$config['per_page'] = 2;$config['num_links'] = 3;$config['uri_segment'] = 4;$config['full_tag_open'] = '<p class="pagination">';$config['full_tag_close'] = '</p>';$config['first_link'] = '首页';$config['last_link'] = '末页';$config['next_link'] = '下一页 >';$config['prev_link'] = '< 上一页';$config['cur_tag_open'] = ' <a class="pagination-active">';$config['cur_tag_close'] = '</a>';$this->pagination->initialize($config);$data['list'] = $this->M_book->get('back', $config['per_page'], $num);$data['page'] = array('total' => $config['total_rows'],'num' => $config['per_page'],'page' => (int) (($config['total_rows'] % $config['per_page'] === 0) ? ($config['total_rows'] / $config['per_page']) : ($config['total_rows'] / $config['per_page'] + 1)),'c_num' => $num);$data['base_url'] = $this->base_url;$this->load->view("manage/book_index",$data);}//获取书籍详情function post() {$data['base_url'] = $this->base_url;$id = $this->input->post('id');$query = $this->M_book->post($id);$data['post'] = $query->row_array();$this->load->view('manage/book_info', $data);}}
3、模型(源码在 application/models文件夹)
if (!defined('BASEPATH'))
exit('No direct script access allowed');/***书籍Model类* @author jayjun* @copyright 2012.09.03*/class M_book extends CI_Model {//获取书籍信息function get($type,$num,$offset) {$data = '';switch ($type) {case 'back':$this->db->select('BookId,Tid,BookName,BookDesc,Price,MemberPrice,BookPic,Bstatus,Total,BuyNum,IsPush,IsHot,IsNew,AddTime,TagList');$data = $this->db->get('book', $num, $offset);break;}return $data;}// 获取书籍信息,$idfunction post($id) {return $query = $this->db->get_where('book', array('BookId' => $id));}// 统计书籍数量function count($type) {$data = '';switch ($type) {default:case 'back':$data = $this->db->count_all_results('book');break;}return $data;}}
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">
<html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/><title>书籍列表</title><link rel="stylesheet" href="<?php echo $base_url; ?>/public/css/base.css" type="text/css" /><link rel="stylesheet" href="<?php echo $base_url; ?>/bootstrap/css/bootstrap.min.css" type="text/css" /><script type="text/javascript" src="<?php echo $base_url; ?>/public/scripts/jquery-1.7.1.min.js"></script><script type="text/javascript" src="<?php echo $base_url; ?>/public/scripts/ajax3.0.js"></script><script type="text/javascript" src="<?php echo $base_url; ?>/bootstrap/js/bootstrap.min.js"></script></head><body><h1 class="mb20">书籍列表</h1><div><div><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></div><div><?php echo $this->pagination->create_links(); ?></div></div><?php echo form_open();?><table class="table bc table-bordered"><thead><tr><th width="10px"><input type="checkbox" /></th><th width="8px">编号</th><th width="130px">书籍名</th><th width="100px">书籍封面</th><th width="43px">市场价</th><th width="43px">会员价</th><th width="40px">库存</th><th width="40px">销量</th><th width="90px">添加时间</th><th width="40px">状态</th><th width="60px">操作</th></tr></thead><tbody><?phpif ($list->num_rows === 0){echo '<tr><td colspan="11">暂无书籍</td></tr>';}else{foreach ($list->result() as $item):?><tr><td class="fc"><input type="checkbox" name="BookId[]" value="<?php echo $item->BookId; ?>" /></td><td width="10px"><?php echo $count++; ?></td><td><a href="#" id="<?php echo $item->BookId; ?>" class="js_book"><?php echo $item->BookName; ?></a></td><td><img src="<?php echo $base_url; ?>/uploads/book/<?php echo $item->BookPic;?>" height="80px" width="60px"></td><td><?php echo $item->Price;?></td><td><?php echo $item->MemberPrice;?></td><td><?php echo $item->Total;?></td><td><?php echo $item->BuyNum;?></td><td><?php echo date("Y-m-d h:i:s",$item->AddTime); ?></td><td><?php echo ($item->Bstatus === '0') ? '待审' : '正常'; ?></td><td><a href="#"><img src="<?php echo $base_url; ?>/public/images/icons/user_edit.png" title="编辑" width="16" height="16" /></a><a href="#" onclick="return confirmAct();"><img src="<?php echo $base_url; ?>/public/images/icons/user_delete.png" title="删除" width="16" height="16" /></a></td></tr><?phpendforeach;}?></tbody><tfoot><tr><td colspan="11"><input type="submit" class="btn btn-primary" value="删除" /></td></tr></tfoot></table><?php echo form_close();?><div id="js_book"></div><script type="text/javascript">$(function(){//点击书籍名称触发事件$(".js_book").live('click',function(){var BookId = $(this).attr("id");//实例化Ajax类var ajax = new Ajax();ajax.post("<?php echo site_url('manage/book/post');?>",{id:BookId},function(data){$("#js_book").html(data);});});//点击书籍详细信息对话框中的关闭按钮所触发事件$('.js_bookClose').live('click',function(){$('#bookModal').hide();//点击关闭按钮触发隐藏事件});});</script></body></html>
加载的弹出框视图(book_info.php):
<!-- 书籍详细信息对话框开始 -->
<div class="modal in" id="bookModal"><div class="modal-header"><a class="js_bookClose close">×</a><h3>《<span><?php echo $post['BookName'] ?></span>》详细参数</h3></div><div class="modal-body"><table class="table table-condensed table-bordered mt20"><tbody><tr><td width="15%">书籍名称:</td><td><?php echo $post['BookName']; ?></td><td rowspan="7" width="30%"><img src="<?php echo $base_url; ?>/uploads/book/<?php echo $post['BookPic'];?>"/></td></tr><tr><td>市场价:</td><td>¥ <?php echo $post['Price']; ?></td></tr><tr><td>会员价:</td><td>¥ <?php echo $post['MemberPrice']; ?></td></tr><tr><td>库存量:</td><td><?php echo $post['Total']; ?>本</td></tr><tr><td>是否推荐:</td><td><?php echo ($post['IsPush'] == 0) ? "否" : "是"; ?></td></tr><tr><td>是否热门:</td><td><?php echo ($post['IsHot'] == 0) ? "否" : "是"; ?></td></tr><tr><td>是否最新:</td><td><?php echo ($post['IsNew'] == 0) ? "否" : "是"; ?></td></tr><tr><td>书籍描述:</td><td><?php echo $post['BookDesc']; ?></td></tr></tbody></table></div><div class="modal-footer"><a class="btn js_bookClose" >关闭</a></div></div><!-- 书籍详细信息对话框结束 -->
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即可访问书籍列表显示页啦,点击书籍名称即可弹出书籍详情对话框。