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高级程序设计 读书笔记之十 本地对象Date日期
Feb 27 Javascript
JavaScript中的acos()方法使用详解
Jun 14 Javascript
JS+CSS实现简单的二级下拉导航菜单效果
Sep 21 Javascript
AngularJS 日期格式化详解
Dec 23 Javascript
[原创]javascript typeof id==='string'?document.getElementById(id):id解释
Nov 02 Javascript
JSONP跨域请求
Mar 02 Javascript
自带气泡提示的vue校验插件(vue-verify-pop)
Apr 07 Javascript
解决vue2中使用axios http请求出现的问题
Mar 05 Javascript
angular4 共享服务在多个组件中数据通信的示例
Mar 30 Javascript
vue cli3 配置proxy代理无效的解决
Oct 30 Javascript
jQuery实现简易QQ聊天框
Feb 10 jQuery
JavaScript事件委托实现原理及优点进行
Aug 29 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分页详细讲解(有实例)
2013/10/30 PHP
PHP往XML中添加节点的方法
2015/03/12 PHP
php生成4位数字验证码的实现代码
2015/11/23 PHP
Laravel5.1数据库连接、创建数据库、创建model及创建控制器的方法
2016/03/29 PHP
Smarty模板简单配置与使用方法示例
2016/05/23 PHP
Dojo之路:如何利用Dojo实现Drag and Drop效果
2007/04/10 Javascript
控制页面按钮在后台执行期间不重复提交的JS方法
2013/06/24 Javascript
ExtJS4 表格的嵌套 rowExpander应用
2014/05/02 Javascript
javascript实现微信分享
2014/12/23 Javascript
JavaScript:Date类型全面解析
2016/05/19 Javascript
浅析$(function) ready和onload 的区别
2016/09/03 Javascript
深入理解Javascript箭头函数中的this
2017/02/13 Javascript
vue router下的html5 history在iis服务器上的设置方法
2017/10/18 Javascript
详解微信小程序canvas圆角矩形的绘制的方法
2018/08/22 Javascript
vue指令v-html使用过滤器filters功能实例
2019/10/25 Javascript
Js视频播放器插件Video.js使用方法详解
2020/02/04 Javascript
Vue实现简单购物车功能
2020/12/13 Vue.js
el-table表头根据内容自适应完美解决表头错位和固定列错位
2021/01/07 Javascript
[03:41]DOTA2上海特锦赛小组赛第三日recap精彩回顾
2016/02/28 DOTA
Python socket.error: [Errno 98] Address already in use的原因和解决方法
2014/08/25 Python
Python实现学生成绩管理系统
2020/04/05 Python
Python模块文件结构代码详解
2018/02/03 Python
Django ORM 自定义 char 类型字段解析
2019/08/09 Python
超实用的 30 段 Python 案例
2019/10/10 Python
Python中的Cookie模块如何使用
2020/06/04 Python
浅谈Keras的Sequential与PyTorch的Sequential的区别
2020/06/17 Python
使用Keras实现Tensor的相乘和相加代码
2020/06/18 Python
python3 中时间戳、时间、日期的转换和加减操作
2020/07/14 Python
Python 添加文件注释和函数注释操作
2020/08/09 Python
Django中template for如何使用方法
2021/01/31 Python
GOLFINO英国官网:高尔夫服装
2020/04/11 全球购物
如何写求职信
2014/05/24 职场文书
群众路线教育实践活动个人对照检查材料
2014/09/22 职场文书
身份证丢失证明
2015/06/19 职场文书
2015年计算机教学工作总结
2015/07/22 职场文书
如何用python识别滑块验证码中的缺口
2021/04/01 Python