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

最新推荐文章于 2021-08-05 15:57:33 发布

原创最新推荐文章于 2021-08-05 15:57:33 发布 · 748 阅读

0 ·

CC 4.0 BY-SA版权

系统运维专栏收录该内容

298 篇文章

订阅专栏

本文介绍CI框架中Ajax的简单应用，实现书籍列表页点击书籍名称弹出书籍详情对话框的无刷新效果。涉及控制器、模型、视图及前端UI框架等关键组件。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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'))
exit('No direct script access allowed');
/**
*书籍管理控制器，只实现书籍列表显示功能
* @author jayjun
*/
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'] = '
';
$config['first_link'] = '首页';
$config['last_link'] = '末页';
$config['next_link'] = '下一页 >';
$config['prev_link'] = '< 上一页';
$config['cur_tag_open'] = ' <a class="pagination-active">';
$config['cur_tag_close'] = '';
$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
*/
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;
}
// 获取书籍信息，$id
function 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>
每页 <?php echo $page['num']; ?> 条 / 当前 <?php echo $count = $page['c_num'] + 1; ?> ~ <?php echo $page['c_num'] + $list->num_rows; ?> 条 / 计 <?php echo $page['page']; ?> 页 / 共 <?php echo $page['total']; ?> 条

<div>
<?php echo $this->pagination->create_links(); ?>
<?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>
<?php
if ($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; ?>
</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 href="#" onclick="return confirmAct();">
<img src="<?php echo $base_url; ?>/public/images/icons/user_delete.png" title="删除" width="16" height="16" />
</td>
</tr>
<?php
endforeach;
}
?>
</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">
<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）：
1. 
2. <div class="modal in" id="bookModal">
3. <div class="modal-header">
4. <a class="js_bookClose close">×
5. <h3>《<span><?php echo $post['BookName'] ?>》详细参数</h3>
<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 class="modal-footer">
<a class="btn js_bookClose" >关闭
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即可访问书籍列表显示页啦，点击书籍名称即可弹出书籍详情对话框。

代码示例 CI_ajax.rar

原文地址：http://bbs.lampbrother.net/read-htm-tid-131890.html

阅读(113) | 评论(0) | 转发(0) |

0

上一篇：阚总工作第二天，写于清晨

下一篇：项目结束有感
相关热门文章
给主人留下些什么吧！~~

评论热议