ajax(3)后台增删改查

注明:原资料: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("链接失败"[email protected]_error());
$select = mysql_select_db("test",$conne)or die("链接失败"[email protected]_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("数据库用户名或密码错误"[email protected]_error);
$select = mysql_select_db("test",$conne)or die("连接失败"[email protected]_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("数据库用户名或密码错误"[email protected]_error());
$select = mysql_select_db("test",$conne)or die("数据库连接失败"[email protected]_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("数据库用户名或密码错误"[email protected]_error());
$select = mysql_select_db("test",$conne)or die("数据库连接失败"[email protected]_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("数据库用户名或密码错误"[email protected]_error())    ;
mysql_select_db("test", $conne)or die("数据库连接失败"[email protected]_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));
?>
时间: 2024-10-23 20:19:55

ajax(3)后台增删改查的相关文章

招新系统(jsp+servlet,实现简略前端网页注册登录+后台增删改查,分学生和管理员,Java语言,mysql数据库连接,tomcat服务器)

背景: 学校工作室招新,一轮考核是写一个条目工作室的招新管理系统,心想那么怎么这么懒呢,让新生写完那么就可以直接买个云服务器拿来做下一年的招新了~...当然 我可能也进不去,里面大佬太多,我太菜. 架构说明: 要求是采用MVC模式,所以分了下面的几个包,但是由于是第一次写,可能分的也不是很清楚: 这个是后台部分的架构: 这个是前端的的展示: (那个StuLoginSuccess.html与StuLoginSuccess.jsp是重复的了,我在写后台时调用的是jsp那个,那个html是没用的.)

JSP+Servlet+Ajax实现用户增删改查的例子

一.数据库设计 [用户表User] 已有的测试数据 二.Java代码编写 Java EE的架构一般分为以下五层: ①.Domain ②.DAO ③.Service ④.Controller ⑤.View 这里的项目结构如下: 1.Domain层 User.java 1 package domain; 2 3 import java.util.Date; 4 5 public class User { 6 7 public User() { 8 9 } 10 11 private Integer

Salesforce零基础(三)简单的数据增删改查页面的构建(Ajax样式)

VisualForce封装了很多的标签用来进行页面设计 下面以一个单一的表进行数据增删改查.表结构如图1所示.通过图可以看出GOODS表自己定义的参数主要包括以下: GoodsName__c,GoodsType__c,GoodsBrand__c,GoodsDescribe__c,GoodsPrice__c. 图1 VF每个页面都是以<apex:page>标签起始</apex:page>结束,每个VF页面都有一个Controller用来控制其业务逻辑.本篇例子中主要用到的控件包括如下

AJAX 调用WebService 、WebApi 增删改查(笔记)

经过大半天努力,终于完成增删改查了!心情有点小激动!!对于初学者的我来说,一路上都是迷茫,坑!!虽说网上有资料,可动手起来却不易(初学者的我).(苦逼啊!) WebService 页面: /// <summary> /// TsetWeb 的摘要说明 /// </summary> [WebService(Namespace = "http://tempuri.org/")] [WebServiceBinding(ConformsTo = WsiProfiles.

vue实战(一):利用vue与ajax实现增删改查

vue实战(一):利用vue与ajax实现增删改查: <%@ page pageEncoding="UTF-8" language="java" %> <%@ include file="../commons/taglib.jsp" %> <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.

yii2-basic后台管理功能开发之二:创建CRUD增删改查

昨天实现了后台模板的嵌套,今天我们可以试着创建CRUD模型啦 刚开始的应该都是“套用”,不再打算细说,只把关键的地方指出来. CRUD即数据库增删改查操作.可以理解为yii2为我们做了一个组件,来实现基本的增删改查视图和操作. 1.创建数据库表 2.用gii生成model模型 3.用gii生成CRUD 需要注意的是CRUD生成的控制器的namespace,要和当前所在目录保持一致.否组路由会报错,找不到该页面等信息.

框架 day39-42 SSH整合练习项目CRM(配置文件,增删改查,ajax,上传/下载,分页,BaseDao/Action)

1     配置文件 1.1   spring配置 1.1.1       介绍     加载properties     配置数据源DataSource     配置SessionFactory , 加载所有hbm.xml     hibernate事务管理     使用 <import > 所有的模块都使用单独配置文件 1.1.2       使用源码包     使用config源码,将源码和配置文件分开存放,方便程序的维护. 1.1.3       spring核心 1.1.

构建ASP.NET MVC4+EF5+EasyUI+Unity2.x注入的后台管理系统(9)-MVC与EasyUI结合增删改查

在第八讲中,我们已经做到了怎么样分页.这一讲主要讲增删改查.第六讲的代码已经给出,里面包含了增删改,大家可以下载下来看下.这讲主要是,制作漂亮的工具栏,虽然easyui的datagrid已经自带可以设置工具栏,我们还是要提取出来,为以后权限控制做更好的准备. 前端代码没有逻辑结果,这也许是我写代码以来写得最轻松的,但也是最繁琐的,因为美工我不是强项,每一次调整都非常的困难,最后我把他调成了这样了: 看得过去的鼓掌一下.样式已经包含在附加代码中了. 大家只要加入以下HTML代码到index上就可以

bootstrap+Ajax+SSM(maven搭建)实现增删改查

https://www.jianshu.com/p/d76316b48e3e 源码: https://github.com/Ching-Lee/crud 功能点: 分页 数据校验 ajax Rest风格的URI:使用HTTP协议请求方式的动词,来表示对资源的操作(GET(查询),POST(新增),PUT(修改),DELETE(删除)) 技术点 基础框架-ssm 数据库mysql 前端框架-bootstrap 项目依赖 -Maven 分页 -pagehelper 逆向工程-Mybatis Gene