码迷，mamicode.com
首页 > Web开发 > 详细

ajax(3)后台增删改查

时间：2017-08-15 16:00:21      阅读：235      评论：0      收藏：0      [点我收藏+]

标签：shadow   abs   black   sts   timeout   min   用户名   内容管理   order   

注明：原资料：http://www.cnblogs.com/liangxiblog/p/5461205.html
<!DOCTYPE html>

<html>
<head>
    <meta name="viewport" content="width=device-width" />
    <link href="css/bootstrap.min.css" rel="stylesheet" />
    <link href="css/button.css" rel="stylesheet" />
    <script src="js/jquery.js"></script>
    <link href="css/font-awesome.css" rel="stylesheet" />
    <link href="css/bootstrap-datetimepicker.min.css" rel="stylesheet" />
    <title></title>
    <style type="text/css">
        .header {
            width: 100%;
            padding: 0px;
            margin: 0px;
            background-color: #699C03;
        }

        .header-nav {
            min-width: 1170px;
            padding: 15px;
            height: 50px;
        }

        .header-nav-left {
            float: left;
            padding-left: 150px;
            width: 40%;
        }

            .header-nav-left h3 {
                font-size: 18px;
                line-height: 25px;
                margin: 0px;
            }

        .header-nav-right {
            float: left;
            width: 59.9999%;
            position: relative;
        }

            .header-nav-right ul {
                padding: 0px;
                margin: 0px;
                list-style: none;
                position: absolute;
                right: 25px;
            }

                .header-nav-right ul li {
                    float: left;
                    margin-left: 5px;
                    color: #fff;
                }

                    .header-nav-right ul li a {
                        color: #fff;
                        text-decoration: none;
                    }

        .content {
            min-width: 1170px;
            padding: 0px;
            margin: 0px auto;
        }

        .content-side {
            width: 25%;
            float: left;
            margin: 20px 0px;
            padding: 20px;
        }

            .content-side ul {
                padding: 0px 0px 0px 50px;
                margin: 0px;
                list-style: none;
            }

                .content-side ul li {
                    margin-bottom: 10px;
                }

                    .content-side ul li a {
                        display: inline-block;
                        padding: 5px 10px;
                        border: 1px solid #ddd;
                        border-radius: 4px;
                        box-shadow: 0px 0px 5px 2px #eee;
                        text-decoration: none;
                    }

        .content-right {
            width: 59.999%;
            margin: 20px 0px;
            padding: 20px;
            float: left;
        }

        .content-right-about {
            height: 250px;
            width: 100%;
        }

        .content-right-form {
            margin: 0px auto;
            padding: 0px;
            width: 100%;
            overflow: hidden;
        }

        .write {
            margin-top: 10px;
            height: 250px;
            width: 99.99%;
            border: 1px solid #BBBBBB;
            border-radius: 4px;
            box-shadow: 0px 0px 5px 2px #DDDDDD;
        }

        .btn {
            margin-bottom: 5px;
            border: 1px solid #ccc;
        }

        .footer {
            border-top: 1px solid #bbb;
            min-width: 1200px;
            margin-top: 20px;
        }

        .submits button {
            background-color: #4CB0F9;
            border-radius: 4px;
            color: #fff;
        }

            .submits button:hover {
                background-color: #4F9FCF;
            }
            .on{
                display:none;
            }
            .uptext{
                width:100%;
                 display:none;
                 z-index:100;
            }
            .uptext-list{
                width:900px;
                height:auto;
                margin:0px auto;
                position:fixed;
                left:0px;
                right:0px;
                top:50px;
                bottom:0px;
                z-index:101;
                background-color:#fff;
               
            }
            #pages{
                padding:0px;
                margin:0px auto;
                list-style:none;
            }
            #pages li{
                float:left;
            }
            .tablebody{
                overflow:hidden;
            }
    </style>
</head>
<body style="position:relative">
    <div class="header">
        <div class="header-nav">
            <div class="header-nav-left">
                <h3>网站后台管理</h3>
            </div>
            <div class="header-nav-right">
                <ul>
                    <li><span>欢迎到来到网站后台</span></li>
                    <li><a href="" onclick="window.location.reload()">主菜单</a></li>
                    <li><a href="">网站首页</a></li>
                    <li><a href="">后台主页</a></li>
                    <li><a href="">内容发布</a></li>
                    <li><a href="">内容管理</a></li>
                    <li><a href="">退出</a></li>
                </ul>
            </div>
        </div>
    </div>
    <div class="content">
        <div class="content-side">
            <ul>
                <li><a href="">删除内容</a></li>
                <li><a href="">更改内容</a></li>
                <li><a href="">查询内容</a></li>
                <li><a href="">搜索内容</a></li>
            </ul>
        </div>
        <div class="content-right">
            <div class="content-right-form">
                <form id="myform" action="" method="post">
                    <dl>
                        <dt class="lead">标题</dt>
                        <dd><input id="frist" type="text" name="title" class="form-control" /></dd>
                    </dl>
                    <dl>
                        <dt>内容</dt>
                        <dd><textarea name="body" style="width:100%;height:250px"></textarea></dd>
                    </dl>
                    <div class=" submits row" style="margin-top: 20px;">
                        <div class="col-lg-6 col-md-6">
                            <button id="addtext" type="submit" class="pull-left form-control ">增加</button>
                        </div>
                        <div class="col-lg-6 col-md-6">
                            <button type="reset" class="pull-right form-control ">重置</button>
                        </div>
                    </div>
                </form>
            </div>
        </div>
        <div class="content-right on">
            <table cellpadding="0" class="table table-bordered">
                <tr class="toptr">
                    <th>标题</th>
                    <th>内容</th>
                    <th>删除</th>
                </tr>
                <tbody class="tablebody"></tbody>
            </table>
            <ul id="pages">
               
            </ul>
        </div>
        <div class="content-right on">
            <table cellpadding="0" class="table table-bordered">
                <tr class="toptr">
                    <th>标题</th>
                    <th>内容</th>
                    <th>修改</th>
                </tr>
                <tbody class="tablebody"></tbody>
            </table>
            <ul id="pages">
              
            </ul>
        </div>
        <div class="content-right on">
            <table cellpadding="0" class="table table-bordered">
                <tr class="toptr">
                    <th>标题</th>
                    <th>内容</th>
                </tr>
                <tbody class="tablebody"></tbody>
            </table>
            <ul id="pages"></ul>
        </div>
        <div class="uptext">
            <div class="uptext-list">
                <form id="myform" action="" method="post">
                    <dl>
                        <dt class="lead">标题</dt>
                        <dd><input type="text" name="title" class="form-control" /></dd>
                    </dl>
                    <dl>
                        <dt>内容</dt>
                        <dd><textarea style="width:100%;height:250px"></textarea></dd>
                    </dl>
                    <div class=" submits row" style="margin-top: 20px;">
                        <div class="col-lg-6 col-md-6">
                            <button id="uptext-button" type="submit" class=" pull-left form-control ">增加</button>
                        </div>
                        <div class="col-lg-6 col-md-6">
                            <button type="button" id="black" class="pull-right form-control ">取消</button>
                        </div>
                    </div>
                </form>
            </div>
        </div>
        <div class="content-right on">
            <div style="padding:20px;" ><label for="search" id="searchs" style="margin-right:5px;border:1px solid #ccc;border-radius:4px;padding:4px;cursor:pointer;color:#fff;">">搜索</label><input id="key" style="border:1px solid #bbb;border-radius:4px;line-height:14px;font-size:14px;padding:6px 12px"  type="text" placeholder="请输入关键字" /></div>
            <table cellpadding="0" class="table table-bordered">
                <tr class="toptr">
                    <th>标题</th>
                    <th>内容</th>
                </tr>
                <tbody class="tablebody"></tbody>
            </table>
            <ul id="pages">

            </ul>
        </div>
        </div>
    <script>
       $(function(){ //增加数据
        $("#addtext").on(‘click‘, function () {
            var $titleval = $("input[id=frist]").val(), $bodyval = $("textarea").val()
            if ($titleval == "" || $bodyval == "") {
                alert("标题与内容不能为空");
            } else {
                var datas = {
                    title:$titleval,
                    body:$bodyval
                };
                $.ajax({
                    type: ‘post‘,
                    timeout: 6000,
                    data: datas,
                    url: ‘add.php‘,
                    async: ‘false‘,
                    success: function (result) {
                        $("input[type=text]").val(‘‘);
                           $("textarea").val(‘‘);
                           obj = JSON.parse(result);//json字符串类型转换成js对象（如果ajax中指定了dataType为json，那么久不需要转换英文指定了json得到的就是一个对象）
                       if(obj.eger=="false"){
                         alert(‘标题或内容已存在‘);
                        }else if(obj=="ture"){
                            alert(‘添加成功‘);
                        }
                    } ,
                    error: function () {
                        alert(‘false‘);
                    }

                })
            } return false;
        })
        //end
        var table = function () {
            var tablebody = ‘‘;
            $.ajax({
                url: ‘select.php‘,
                dataType: ‘json‘,
                type: ‘post‘,
                success: function (result) {
                    $(".tablebody").empty();
                    $.each(result.datalist, function (i, data) {
                            tablebody += "<tr><td>" + data.title + "</td><td>" + data.body + "</td><td style=‘text-align:cneter‘><span><a href=‘#‘ id=‘remove‘ textid=‘" + data.ID + "‘>删除</a></td></tr>"
                    })
                    $(".tablebody").html(tablebody);
                }
            })
        }
        var table1 = function(){
            var tablebody = ‘‘;
            $.ajax({
                url: ‘select.php‘,
                dataType: ‘json‘,
                type: ‘post‘,
                success: function (result) {
                    $(".tablebody").empty();
                    $.each(result.datalist, function (i, data) {
                            tablebody += "<tr><td id=‘title‘>" + data.title + "</td><td id=‘bodyval‘>" + data.body + "</td><td  style=‘text-align:cneter‘><span><a href=‘#‘ id=‘uptext‘ textid=‘" + data.ID + "‘>修改</a></td></tr>"
                    })
                    $(".tablebody").html(tablebody);
                }
            })
        }
        //查询翻页star
        var page = 0,//当前页初始化
          onepage = 2,//每页数
          all = 0,
          pagenum = 0;//页数初始化
        var pg = 0; //页码索引
        var table2 = function () {
            var tablebody = ‘‘;
            var   spanhtml=‘‘;
            $.ajax({
                url: ‘select.php‘,
                dataType: ‘json‘,
                type: ‘post‘,
                success: function (result) {
                    $(".tablebody").empty();
                    $(".content .content-right").eq(3).children(‘ul‘).empty();
                    all = result.datalist.length;
                    pagenum = Math.ceil(all / 2);
                    var start = page * onepage, 
                       end = (page + 1) * onepage;
                    $.each(result.datalist, function (i, data){
                        if (i>=start&&i<end) {
                            tablebody += "<tr><td id=‘title‘>" + data.title + "</td><td id=‘bodyval‘>" + data.body + "</td></tr>"
                        }
                    })
                    for (pg = 0; pg <= 2; pg++) {
                        if (page == pg) {
                            spanhtml += "<span style=‘float:left;cursor:pointer;padding:0px 5px ;color:#fff‘>" + (page + 1) + "</span>";//当前页颜色突出
                        }else
                        spanhtml += "<span style=‘float:left;cursor:pointer;padding:0px 5px‘>" + (pg+1) + "</span>";
                    }
                    $(".tablebody").html(tablebody);
                    $(".content .content-right").eq(3).children(‘ul‘).append("<li style=‘cursor:pointer‘>上一页</li><li  style=‘cursor:pointer‘>下一页</li>").children(‘li:eq(0)‘).after(spanhtml);
                }
            })
        }
        var table3 = function () {
            var tablebody = ‘‘;
            $.ajax({
                url: ‘select.php‘,
                dataType: ‘json‘,
                type: ‘post‘,
                success: function (result) {
                    $(".tablebody").empty();
                    $.each(result.datalist, function (i, data) {
                            tablebody += "<tr><td id=‘title‘>" + data.title + "</td><td id=‘bodyval‘>" + data.body + "</td></tr>"
                    })
                    $(".tablebody").html(tablebody);
                }
            })
        }
       
        $(".content-side ul li").click(function () {
            var index = $(this).index();
            $(".content .content-right").eq(index + 1).removeClass("on").siblings(‘div.content-right‘).addClass("on");
            if (index == 1) {
               table1();
            } else if(index==2){
                table2();
            } else if (index == 3) {
                table3();
            }else{
                table();    
            }
            return false;
        })
           //上下翻页
        $("ul#pages li").live(‘click‘, function () {
            var index = $(this).index();
            if (index == 0 && page > 0) {
                page--;
                
            } else if (index == (pg+1) && page < pagenum-1) {
                page++;
            }
            else return false;
            table2();
        })
           //跳转页
        $("ul#pages span").live(‘click‘, function () {
               page = $(this).index()-1;
               table2();
           })
        
        
        //删除数据
        $("#remove").live(‘click‘, function () {
            var textid = $(this).attr(‘textid‘);
            $.ajax({
                type: ‘post‘,
                data: {
                    textid: textid
                },
                url: ‘remove.php‘,
                success: function () {
                    table();
                }
            })
            return false;
        })//end
        //修改数据
        $("#uptext").live(‘click‘, function () {
              textid = $(this).attr(‘textid‘)；
             var   title = $(this).parents(‘td‘).siblings(‘#title‘).html(),
            body = $(this).parents(‘td‘).siblings(‘#bodyval‘).html();
                $(".uptext input[type=text]").val(title);
                $(".uptext textarea").val(body);
                $(".uptext").show();
                $("#black").click(function () {
                    $(‘.uptext‘).hide();
                })
                $(‘#uptext-button‘).on(‘click‘, function () {
                    var title = $(".uptext input[type=text]").val(),
                        bodyval = $(".uptext textarea").val();
                    var uptext = {
                        title: title,
                        bodyval:bodyval,
                        textid:textid,
                    }
                    $.ajax({
                        type: ‘post‘,
                        url: ‘update.php‘,
                        data: uptext,
                        success: function () {
                            $(‘.uptext‘).hide();
                            table1();
                        },
                        error: function () {
                            alert(‘错误‘);
                        }
                      
                    })
                    return false;
                })
        })//end
           //搜索
        $("#searchs").live(‘click‘, function () {
            var $keys = $("input[id=key]").val(),
            resulthtml = ‘‘,
            i = 0;
            var keys = {
                keys: $keys
            };
            $.ajax({
                url: ‘search.php‘,
                data: keys,
                dataType: ‘json‘,
                type: ‘post‘,
                success: function (result) { 
                        $(".tablebody").empty();
                        $.each(result.datalist, function (i,data) {
                                resulthtml += "<tr><td id=‘title‘>" + data.title + "</td><td id=‘bodyval‘>" + data.body + "</td></tr>"
                        })
                        $(".tablebody").html(resulthtml);
                    
                }
            })
        })
      })    
    </script>
    <div class="footer" style="position:fixed;bottom:20px;left:0px;right:0px">
        <p class="text-center">Copyright ? 2016.5.5 </p>
    </div>
</body>
</html>
技术分享

主要改修的还是ajax部分，由于前面写的是基于mvc的后台所以前端部分会有点修改。以下是php后台代码

这一部分说实话弄了我半天，主要是一个去重复的功能，json对象这部分，后面会提到

技术分享
增加数据
add.pp:
<?php
header("Content-type:text/html;charset=utf8");
$conne = mysql_connect("localhost","root","root")or die("链接失败".@mysql_error());
$select = mysql_select_db("test",$conne)or die("链接失败".@mysql_error());
$utfgbk = mysql_query("set names utf8");
$title = $_REQUEST[‘title‘];
$body = $_REQUEST[‘body‘];
$arraysone = array(‘one‘=>‘ture‘,‘two‘=>‘false‘);
$arrays = array(array(‘one‘=>‘ture‘,‘two‘=>‘false‘));
$row =mysql_query("select count(*) from article where title=‘$title‘");
$text = mysql_fetch_row($row);
$nam = $text[0];
if($nam==1){
    echo json_encode(array("eger"=>$arraysone[‘two‘]));
}else{
$sql = mysql_query("insert into article(title,body)values(‘$title‘,‘$body‘)");
    echo json_encode($arrays[0][‘one‘]);
}
?>
技术分享

有些数据库连接操作我并没有弄到一个文件去，而且增删改查文件都是独立的，

删除部分

技术分享
remove.php <?php
header("content-type:text/html;charset=utf8");
$conne = mysql_connect("localhost","root","root")or die("数据库用户名或密码错误".@mysql_error);
$select = mysql_select_db("test",$conne)or die("连接失败".@mysql_error);
$utf = mysql_query("set names uthf8");
$id = $_REQUEST[‘textid‘];
if($id){
    mysql_query("delete from article where id=$id");
}else{
    echo "false";
}
?>
技术分享

修改部分

技术分享
update.php <?php
header("content-type:text/html;charset=utf8");
$conne =mysql_connect("localhost","root","root")or die("数据库用户名或密码错误".@mysql_error());
$select = mysql_select_db("test",$conne)or die("数据库连接失败".@mysql_error());
$utf = mysql_query("set names utf8");
$id = $_REQUEST[‘textid‘];
$title = $_REQUEST[‘title‘];
$body = $_REQUEST[‘bodyval‘];
$sql=mysql_query("update article set title=‘$title‘,body=‘$body‘ where id=$id");
mysql_free_result($sql);
?>
技术分享

查询部分，查询部分我是分开来的，一个是搜索，一个是列出所有内容并分页显示，分页功能写在前端代码部分

技术分享
这是搜索的后台代码部分
search.php
<?php
header("content-type:text/html;charset=utf8");
$conne =mysql_connect("localhost","root","root")or die("数据库用户名或密码错误".@mysql_error());
$select = mysql_select_db("test",$conne)or die("数据库连接失败".@mysql_error());
$utf = mysql_query("set names utf8");
$arrays = array();
$i=0;
$key = $_REQUEST[‘keys‘];
    if($key){
    $result = mysql_query("select*from article where title like‘%$key%‘ or body like ‘%$key%‘");
    while($row = mysql_fetch_array($result,MYSQL_ASSOC)){
        $arrays[$i]=$row;
        $i++;
    }
    echo json_encode(array("datalist"=>$arrays));
    }else{
        $result = mysql_query("select*from article");
        while($row = mysql_fetch_array($result,MYSQL_ASSOC)){
        $arrays[$i]=$row;
        $i++;
        }
        echo json_encode(array("datalist"=>$arrays));
    }
?>
技术分享
技术分享
这是查询翻页部分，其实这部分删除和修改及搜索都有用到，所以这是通用的一部分
<?php
header("Content-type:text/html;charset=utf8");
$conne = mysql_connect("localhost","root","root")or die("数据库用户名或密码错误".@mysql_error())    ;
mysql_select_db("test", $conne)or die("数据库连接失败".@mysql_error());
mysql_query("set names utf8");
$listsql = mysql_query("select*from article");
$arrays = array();
$i=0;
while($row = mysql_fetch_array($listsql,MYSQL_ASSOC)){
    $arrays[$i]=$row;
    $i++;
}
echo json_encode(array(‘datalist‘=>$arrays));
?>

ajax(3)后台增删改查

标签：shadow   abs   black   sts   timeout   min   用户名   内容管理   order   

原文地址：http://www.cnblogs.com/xiaoyangtian/p/7365336.html
踩
(0)
赞
(0)
   
举报
评论 一句话评论（0）
登录后才能评论！
分享档案
更多>
2021年07月29日 (22)
2021年07月28日 (40)
2021年07月27日 (32)
2021年07月26日 (79)
2021年07月23日 (29)
2021年07月22日 (30)
2021年07月21日 (42)
2021年07月20日 (16)
2021年07月19日 (90)
2021年07月16日 (35)
周排行
mamicode.com排行更多图片
更多
友情链接
兰亭集智   国之画   百度统计   站长统计   阿里云   chrome插件   新版天听网
关于我们 - 联系我们 - 留言反馈
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码！