分类信息的增、删、改、查(Jquery+Ajax+PHP+MySQL)

3200
  1. 1、
     表 ·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;
  2.  2

  3.  接着加载jquery库、操作结果提示插件jNotify和删除确认插件hiAlert

  4.  <script type="text/javascript" src="js/jquery.js"></script>  

  5.  <script type="text/javascript" src="js/jNotify.jquery.js"></script>  

  6.  <script type="text/javascript" src="js/jquery.alert.js"></script>  

  7.  <script type="text/javascript" src="js/global.js"></script>  

  8.  <link rel="stylesheet" type="text/css" href="css/alert.css" />

  9. index.php

  10.  3

  11.  我们先遍历表·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>";  
     }  
     ?>
  12. HTML
     4、
     接着我们把遍历出来的列表以字符串的形式放到#catalist,代码如下:
     <div class="selectlist">  
        <h3>客户类别</h3>  
        <ul id="catalist">  
             <?php echo $list;?>  
        </ul>  
        <p><a href="javascript:;" onclick="addOpt()">新增一项</a></p>  
     </div>
  13. 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;  
                }  
            });  
        });  
     });
  14.  5、
     增加传给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;  
     }