Jquery+Ajax+PHP+MySQL实现分类列表管理(上)


Posted in Javascript onOctober 28, 2015

在实际应用中,我们要管理一个客户分类,实现对客户分类的增加、删除和修改等操作,如何让这些操作变得更人性化,让用户操作起来更加方便成了我们必须研究的课题。

 Jquery+Ajax+PHP+MySQL实现分类列表管理(上)

准备阶段
您需要具备HTML和Jquery等前端知识,以及基本的PHP程序和MySql数据库相关知识。要实现本文中的DEMO示例,首先需要一个mysql数据库:

CREATE TABLE `catalist` ( 
 `cid` int(11) NOT NULL auto_increment, 
 `title` varchar(100) NOT NULL, 
 `sort` mediumint(6) NOT NULL default '0', 
 PRIMARY KEY (`cid`) 
) ENGINE=MyISAM DEFAULT CHARSET=utf8;

其次在页面中引入jquery库,以及操作结果提示插件jNotify和删除确认插件hiAlert。后者两个插件在本站都有详细的讲解,读者可以通过链接了解下:
将需要准备的文件一并加入到index.php的<head>之间。

<script type="text/javascript" src="js/jquery.js"></script> 
<script type="text/javascript" src="js/jNotify.jquery.js"></script> 
<script type="text/javascript" src="js/jquery.alert.js"></script> 
<script type="text/javascript" src="js/global.js"></script> 
<link rel="stylesheet" type="text/css" href="css/alert.css" />

准备完毕我们进入主题。
index.php
index.php是主体页面,读取了数据库中的分类数据,以列表展示,并提供了增加、删除和修改的功能按钮。

<?php 
include_once('connect.php'); //连接数据库 
$query = mysql_query("select * from catalist order by cid asc"); 
while($row=mysql_fetch_array($query)){ 
 $list .= "<li rel='".$row['cid']."'><span class='del' title='删除'></span> 
 <span class='edit' title='编辑'></span><span class='txt'>".$row['title']."</span></li>"; 
} 
?>

以上代码通过读取数据表中的数据,返回一个列表字符串。然后我们要将字符串输出到对应的列表中,代码如下:

<div class="selectlist"> 
 <h3>客户类别</h3> 
 <ul id="catalist"> 
   <?php echo $list;?> 
 </ul> 
 <p><a href="javascript:;" onclick="addOpt()">新增一项</a></p> 
</div>

试着往数据表中添加几条数据,可以看到一个分类列表。
CSS

.input{width:160px; padding:2px; border:1px solid #d3d3d3} 
.cur_tr{background:#ffc} 
.selectlist{width:280px; margin:30px auto; border:1px solid #ccc;} 
.selectlist h3{height:32px; line-height:32px; padding:0 4px; border-bottom:1px dotted #d3d3d3; 
 background:#f7f7f7} 
.selectlist h3 span{float:right; font-weight:500} 
.selectlist ul{margin-top:4px; margin-left:20px; list-style-type: disc} 
.selectlist ul li{line-height:26px} 
.selectlist p{line-height:28px; padding-left:6px} 
.selectlist ul li span{width:20px; height:20px} 
.selectlist ul li span.edit{ float:right;background:url(images/edits.gif) no-repeat 0 5px; 
cursor:pointer} 
.selectlist ul li span.del,.selectlist ul li span.dels,.selectlist ul li span.cancer{ 
 float:right;background:url(images/del.gif) no-repeat 0 5px; cursor:pointer} 
.selectlist ul li span.ok,.selectlist ul li span.oks{float:right;background:url(images/ok.gif) 
no-repeat 0 5px; cursor:pointer}

CSS我就不详细讲解,看下就明白了,最终显示的效果如图:

Jquery+Ajax+PHP+MySQL实现分类列表管理(上)

新增项操作
在global.js加入addOpt()函数:

function addOpt(){ 
 var str = "<li><span class='dels' title='取消'></span><span class='ok' title='保存'></span> 
 <input type='text' class='input' /></li>"; 
 $("#catalist").append(str); 
}

通过单击“新增一项”链接,向DOM中添加了一个新增项的输入框。
当用户输入内容后,点击“保存”,将会触发一个ajax操作,先看代码:

$(function(){ 
 //保存新增项 
 $(".ok").live('click',function(){ 
  var btn = $(this); 
  var input_str = btn.parent().find('input').val(); 
  if(input_str==""){ 
   jNotify("请输入类别!"); 
   return false; 
  } 
  var str = escape(input_str); 
  $.getJSON("post.php?action=add&title="+str,function(json){ 
   if(json.success==1){ 
    var li = "<li rel='"+json.id+"'><span class='del' title='删除'> 
    </span><span class='edit' title='编辑'></span><span class='txt'>"+ 
    json.title+"</span></li>"; 
    $("#catalist").append(li); 
    btn.parent().remove(); 
    jSuccess("恭喜,操作成功!"); 
   }else{ 
    jNotify("出错了!"); 
    return false; 
   } 
  }); 
 }); 
});

首先获取用户输入的内容,如果没有输入任何内容则提示用户输入内容,然后将用户输入的内容进行escape编码,保证中文字符能正确传输给后台程序识别。然后通过$.getJSON方法向后台post.php发起一个异步的Ajax请求。后台post.php接收参数值并进行相关处理,前端代码通过响应后台返回的JSON数据,如果新增成功,则向列表后面追加一项,并提示用户“操作成功”,如果失败则提示用户“出错了”。
如果要取消新增项操作,只需当单击“取消”按钮时执行以下代码:

//取消新增项 
$(".dels").live('click',function(){ 
  $(this).parent().remove(); //将新增项移除 
});

后台post.php需要处理新增项内容,代码如下:

include_once('connect.php'); //连接数据库 
$action = $_GET['action']; 
switch($action){ 
 case 'add': //新增项 
  $title = uniDecode($_GET['title'],'utf-8'); 
  $title = htmlspecialchars($title,ENT_QUOTES); 
  $query = mysql_query("insert into catalist (cid,title) values (NULL,'$title')"); 
  if($query){ 
   $insertid = mysql_insert_id($link); 
   $arr = array('id'=>$insertid,'title'=>$title,'success'=>1); 
  }else{ 
   $arr = array('success'=>2); 
  } 
  echo json_encode($arr); 
  break; 
  case '': 
  break; 
}

通过接收前端提交的内容,进行解码后,写入数据表中,并输出JSON数据格式供前台处理。关于uniDecode()函数,读者可以下载源码了解,主要是为了正确读取解析jquery通过异步提交的中文字符串。
添加项操作已经完成,下面请看删除项操作。删除项操作
回到global.js,在$(function(){})加入下面的代码:

//删除项 
 $(".del").live('click',function(){ 
  var btn = $(this); 
  var id = btn.parent().attr('rel'); 
  var URL = "post.php?action=del"; 
  hiConfirm('您确定要删除吗?', '提示',function(r){ 
   if(r){ 
    $.ajax({ 
    type: "POST", 
    url: URL, 
    data: "id="+id, 
    success: function(msg){ 
     if(msg==1){ 
      jSuccess("删除成功!"); 
      btn.parent().remove(); 
     }else{ 
      jNotify("操作失败!"); 
      return false; 
     } 
    } 
    }); 
   } 
  }); 
 });

显然,通过单击“删除”按钮,同样是向后台post.php发送一个ajax请求,将删除项对应的参数ID发送给后台并响应后台处理结果,如果成功,则提示用户“删除成功”,并通过remove()将数据项移除,如果失败,则提示“操作失败”。
后台post.php接收参数并作出相应的处理:

case 'del': //删除项 
 $id = $_POST['id']; 
 $query = mysql_query("delete from catalist where cid=".$id); 
 if($query){ 
  echo '1'; 
 }else{ 
  echo '2'; 
 } 
 break;

以上这段代码片段,加在post.php的switch语句中,执行了删除语句,并输出执行结果供前端处理。
限于篇幅,修改项操作在下此文章中再进行讲解,敬请关注,不要错过喽。

Javascript 相关文章推荐
学习ExtJS border布局
Oct 08 Javascript
js 获取子节点函数 (兼容FF与IE)
Apr 18 Javascript
运算符&amp;&amp;的三个不同层次
Apr 07 Javascript
jQuery实现点击标题输入详细信息
Apr 16 Javascript
jquery操作 iframe的方法
Dec 03 Javascript
浅谈页面装载js及性能分析方法
Dec 09 Javascript
JavaScript关于提高网站性能的几点建议(一)
Jul 24 Javascript
JS命令模式例子之菜单程序
Oct 10 Javascript
基于jQuery实现的打字机效果
Jan 16 Javascript
微信小程序 在线支付功能的实现
Mar 14 Javascript
jQuery Masonry瀑布流布局神器使用详解
May 25 jQuery
layer.open组件获取弹出层页面变量、函数的实例
Sep 25 Javascript
自己动手写的jquery分页控件(非常简单实用)
Oct 28 #Javascript
Jquery日历插件制作简单日历
Oct 28 #Javascript
使用CoffeeScrip优美方式编写javascript代码
Oct 28 #Javascript
开启Javascript中apply、call、bind的用法之旅模式
Oct 28 #Javascript
JavaScript多并发问题如何处理
Oct 28 #Javascript
JS实现双击屏幕滚动效果代码
Oct 28 #Javascript
基于JavaScript如何实现私有成员的语法特征及私有成员的实现方式
Oct 28 #Javascript
You might like
Zend引擎的发展 [15]
2006/10/09 PHP
PHP中功能强大却很少使用的函数实例小结
2016/11/10 PHP
IE中radio 或checkbox的checked属性初始状态下不能选中显示问题
2009/07/25 Javascript
javascript当onmousedown、onmouseup、onclick同时应用于同一个标签节点Element
2010/01/05 Javascript
js实现俄罗斯方块小游戏分享
2014/01/31 Javascript
jQuery 取值、赋值的基本方法整理
2014/03/31 Javascript
Thinkphp模板没有解析直接原样输出的解决方法
2014/10/31 Javascript
JS实现灵巧的下拉导航效果代码
2015/08/25 Javascript
jQuery判断是否存在滚动条的简单方法
2016/09/17 Javascript
vue loadmore组件上拉加载更多功能示例代码
2017/07/19 Javascript
Vue.js项目模板搭建图文教程
2017/09/20 Javascript
JS实现为动态创建的元素添加事件操作示例
2018/03/17 Javascript
vue中锚点的三种方法
2018/07/06 Javascript
Node爬取大批量文件的方法示例
2019/06/28 Javascript
vue data恢复初始化数据的实现方法
2019/10/31 Javascript
微信小程序canvas截取任意形状的实现代码
2020/01/13 Javascript
vue 解决addRoutes多次添加路由重复的操作
2020/08/04 Javascript
[02:05]2014DOTA2西雅图国际邀请赛 BBC第二天小组赛总结
2014/07/11 DOTA
[02:31]2018年度DOTA2最具人气选手-完美盛典
2018/12/16 DOTA
[01:34]DOTA2 7.22版本新增神杖效果一览(敏捷英雄篇)
2019/05/28 DOTA
如何使用Python实现斐波那契数列
2019/07/02 Python
python函数参数(必须参数、可变参数、关键字参数)
2019/08/16 Python
Python django搭建layui提交表单,表格,图标的实例
2019/11/18 Python
python3 图片 4通道转成3通道 1通道转成3通道 图片压缩实例
2019/12/03 Python
keras模型保存为tensorflow的二进制模型方式
2020/05/25 Python
Python实现区域填充的示例代码
2021/02/03 Python
python爬虫scrapy基于CrawlSpider类的全站数据爬取示例解析
2021/02/20 Python
ALDI奥乐齐官方海外旗舰店:德国百年超市
2017/12/27 全球购物
银行委托书范本
2014/04/04 职场文书
毕业设计说明书
2014/05/07 职场文书
党的群众路线教育实践活动个人对照检查材料(校长)
2014/11/05 职场文书
师德师风学习材料
2014/12/19 职场文书
经理岗位职责
2015/02/02 职场文书
期中考试后的感想
2015/08/07 职场文书
请假条应该怎么写?
2019/06/24 职场文书
Apache SkyWalking 监控 MySQL Server 实战解析
2022/09/23 Servers