Jquery+Ajax+PHP+MySQL分类增删改查【原创】

表 ·catalist·

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

<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

我们先遍历表·catalist·中的数据，并且给每一项加上，删除和修改按钮，在最下方加上增加按钮。

<?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>"; 
} 
?>

HTML

接着我们把遍历出来的列表以字符串的形式放到#catalist，代码如下：

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

jQuery

global.js中增加的操作方式如下：

$(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; 
            } 
        }); 
    }); 
});

增加传给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; 
}

删除项大家可用下载源码来看看......