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

2024-09-27 16:02:59

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

准备阶段
您需要具备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我就不详细讲解，看下就明白了，最终显示的效果如图：

新增项操作
在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语句中，执行了删除语句，并输出执行结果供前端处理。
限于篇幅，修改项操作在下此文章中再进行讲解，敬请关注，不要错过喽。

php使HTML标签自动补全闭合函数代码

简单解释一些代码: 第一个 ~(<[^>]+?>)~si 这个正则是匹配<--->中的内容.简单说是所有的<标签>. 第二个 ~<([a-z0-9]+)[^/>]*?/>~si 这个正则是匹配<--/>中的内容.是单闭合标签如<br /> 第三个 ~</([a-z0-9]+)[^/>]*?>~si 这个正则是匹配</......>中的内容.也就是结束标签如</a> 第四个 ~&
PHP文章采集URL补全函数(FormatUrl)

写采集必用的函数,URL补全函数,也可叫做FormatUrl. 写此函数作用就是为了开发采集程序,采集文章的时候会经常遇到页面里的路径是 "相对路径" 或者 "绝对根路径" 不是"绝对全路径"就无法收集URL. 所以,就需要本功能函数进行对代码进行格式化,把所有的超链接都格式化一遍,这样就可以直接收集到正确的URL了. 路径知识普及相对路径:"../" "./" 或者前面什么都不加绝对根路径:/path
PHP实现HTML标签自动补全代码

一般情况下先用PHP的 strip_tags 函数去掉所有html标签,再去掉空格等,然后再用substr或者自己实现的cn_substr函数来实现截取.因为如果不先去掉html标签,直接截取出来的字符串就会有没有闭合的标签出现,有时甚至会截取在标签上面比如复制代码代码如下: </di ... 今天遇到一个内容翻页截取问题: 正文是用富文本编辑器写入的,编辑器上有个分页按钮,点击之后就往当前光标位置插入一个蓝色的复制代码代码如下: <hr /> 横线.然后php直接存入数据库.显
jQuery+Ajax+PHP+Mysql实现分页显示数据实例讲解

本文使用jQuery,结合PHP和Mysql,通过实例讲解如何实现Ajax数据加载效果. HTML <div id="list"> <ul></ul> </div> <div id="pagecount"></div> 页面中,#list用来展示数据列表,包括本例要展示的商品图片和标题,#pagecount用来展示分页条,即本例中的上一页.下一页. 当然,别忘了,在head中预先载入jquery
PHP+jQuery实现自动补全功能源码

前面手工写了一个下拉自动补全功能,写的简单,只实现了鼠标选择的功能,不支持键盘选择.由于项目很多地方要用到这个功能,所以需要用心做一下.发现select2这个插件的功能可以满足当前需求. 在使用jquery插件select2的过程中遇到了一些疑惑,无论是穿json数据还是通过jsonp方式取数据,都能够正确返回.可是下拉列表中的条目却不能被选中,对鼠标和键盘选择都无效. 后来发现,select2插件在实现选中时是以数据中的id字段为准的.所以不管是json还是jsonp,ajax返回的数据都必须
PHP自动补全表单的两种方法

效果图: 第一种:从数据库中检索之后补全第二种:邮箱等纯前端的补全先说第二种,使用开源的插件,所以相对简单. github上面的项目 completer. https://github.com/fengyuanchen/completer 做法特别容易,github上面有详细的文档. 一开始尝试用这个来配上自己的后台代码,做成第一种的自动补全,搞了半天失败了.可能本人js太差,改动太多的话,代码很复杂,除非认真研究上面这个开源项目. 主要失败在我在后台数据库找出来的完整的模糊查询得到的数据,
PHP+jQuery+Ajax+Mysql如何实现发表心情功能

实现发表心情功能通过php+jquery+ajax+mysql技术,大致流程我先给大家理下:主页index.html页面通过ajax获取心情图标及柱状图相关数据,当用户点击其中的一个心情图标时,向后台php发送请求,php对用户cookie验证(是否是首次提交),然后将数据库对应的心情字段内容加1,成功后返回前端页面,告诉首页index页面发表成功,并调整柱状图和统计数据. 请看效果图: html: 先看HTML,我们在index.html中放置一个#msg,用来显示操作结果信息,#mood是操
Jquery+Ajax+PHP+MySQL实现分类列表管理(下)

在上篇中,我们详细讲解了如何实现列表管理的新增和删除操作,可以看出,前端页面通过ajax与后台通信,根据后台处理结果响应前端页面交互操作,这是一个很典型的Ajax和JSON应用的例子. 本文将继续上篇文中的示例,完成编辑操作. 编辑项操作用户通过单击"编辑"按钮,相应的项会立即变为编辑状态,出现一个输入框,用户可以重新输入新的内容,然后点击"保存"按钮完成编辑操作,也可以单击"取消"按钮取消编辑状态. 首先,通过单击"编辑"
php+mysql+jquery实现简易的检索自动补全提示功能

本文实例讲述了php+mysql+jquery实现简易的检索自动补全提示功能.分享给大家供大家参考,具体如下: 这段时间看了一些关于自动补全提示方面的内容,发现大部分实现过程都十分复杂.心想这应该是一个比较简单的功能啊,于是自己亲自动手来小试一下.思路很常规,需要说明的是没有为提示内容绑定键盘事件,仅可用鼠标操作. html+jQuery内容: <html> <head> <style type="text/css"> #autoBox { marg
php截取html字符串及自动补全html标签的方法

本文实例讲述了php截取html字符串及自动补全html标签的方法.分享给大家供大家参考.具体分析如下: 这里总结一下关于利用php截取html字符串自动补全html标签,实际开发中会经常碰到,很多人直接先strip_tags过滤掉html标签,但是就只剩下纯文本了,可读性非常差,下面是一个函数,代码如下: 复制代码代码如下: /** * 截取HTML,并自动补全闭合 * @param $html * @param $length * @param $end */ function

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

相关推荐

随机推荐