Jquery+Ajax+PHP+MySQL分类增删改查

浏览:1969 最后更新:2017-03-21 19:35 分类:示例 关键字: 无限分类 ajax分类 Mysql增删改查
演示下载地址:http://www.erdangjiade.com/js/58.html
效果图:

具体完整代码如下:表 ·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;  
}

删除项大家可用下载源码来看看......
评论( 相关
后面还有条评论,点击查看>>