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 相关文章推荐
JavaScript Undefined,Null类型和NaN值区别
Oct 22 Javascript
Ext.MessageBox工具类简介
Dec 10 Javascript
基于jquery的二级联动菜单实现代码
Apr 25 Javascript
jquery插件制作 手风琴Panel效果实现
Aug 17 Javascript
angularJS中router的使用指南
Feb 09 Javascript
基于jQuery实现简单的折叠菜单效果
Nov 23 Javascript
jQuery给指定的table动态添加删除行的操作方法
Oct 12 Javascript
完全深入学习Bootstrap表单
Nov 28 Javascript
vue+node+webpack环境搭建教程
Nov 05 Javascript
在axios中使用params传参的时候传入数组的方法
Sep 25 Javascript
webpack安装配置与常见使用过程详解(结合vue)
Jun 01 Javascript
如何使用 JavaScript 操作浏览器历史记录 API
Nov 24 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
php数据访问之查询关键字
2016/05/09 PHP
PHP实现截取中文字符串不出现?号的解决方法
2016/12/29 PHP
php微信公众号开发之校园图书馆
2018/10/20 PHP
javascript 字符串连接的性能问题(多浏览器)
2008/11/18 Javascript
jquery 分页控件实现代码
2009/11/30 Javascript
JavaScript arguments 多参传值函数
2010/10/24 Javascript
javascript新建标签,判断键盘输入,以及判断焦点(示例代码)
2013/11/25 Javascript
设置jsf的选择框h:selectOneMenu为不可编辑状态的方法
2014/01/07 Javascript
JavaScript实现从数组中选出和等于固定值的n个数
2014/09/03 Javascript
快速掌握Node.js模块封装及使用
2016/03/21 Javascript
TinyMCE汉化及本地上传图片功能实例详解
2016/05/31 Javascript
vue.js中过滤器的使用教程
2017/06/08 Javascript
Node.js中package.json中库的版本号(~和^)
2019/04/02 Javascript
vue draggable resizable gorkys与v-chart使用与总结
2019/09/05 Javascript
小程序按钮避免多次调用接口和点击方案实现(不用showLoading)
2020/04/15 Javascript
vue-socket.io接收不到数据问题的解决方法
2020/05/13 Javascript
通过实例了解Nodejs模块系统及require机制
2020/07/16 NodeJs
typescript配置alias的详细步骤
2020/08/12 Javascript
Python中encode()方法的使用简介
2015/05/18 Python
Python学习思维导图(必看篇)
2017/06/26 Python
python中的闭包函数
2018/02/09 Python
django 开发忘记密码通过邮箱找回功能示例
2018/04/17 Python
python画一个玫瑰和一个爱心
2020/08/18 Python
Python3 Post登录并且保存cookie登录其他页面的方法
2018/12/28 Python
详解Python3注释知识点
2019/02/19 Python
tensorflow实现测试时读取任意指定的check point的网络参数
2020/01/21 Python
给儿子的表扬信
2014/01/15 职场文书
教师创先争优承诺书
2015/04/27 职场文书
2015年高校就业工作总结
2015/05/04 职场文书
特种设备安全管理制度
2015/08/06 职场文书
2016年大学生寒假社会实践心得体会
2015/10/09 职场文书
2019年朋友圈经典励志语录50条
2019/07/05 职场文书
Nginx解决403 forbidden的完整步骤
2021/04/01 Servers
SpringMVC 整合SSM框架详解
2021/08/30 Java/Android
webpack介绍使用配置教程详解webpack介绍和使用
2022/06/25 Javascript
spring 项目实现限流方法示例
2022/07/15 Java/Android