PHP、AJAX综合练习（增、删、改、查、分页、模糊查询）

先来几张效果图

主页面分页显示：

关键字查询，关键字描红

添加数组，弹出窗口，点击保存，再不刷新页面的同时添加到网页数据

修改界面：弹出窗口，文本框中保留点击的车辆的原始信息

主页面代码

<meta charset="UTF-8" />

    <title>Document</title>

    <script src="../gongju/bootstrap-3.3.7-dist/js/jquery-1.11.2.min.js" type="text/javascript"></script>

    <script src="../gongju/bootstrap-3.3.7-dist/js/bootstrap.min.js" type="text/javascript"></script>

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

    <link rel="stylesheet" type="text/css" href="../gongju/bootstrap-3.3.7-dist/css/bootstrap.min.css"/>

    <style type="text/css">

        .odd{background-color:#AFD9EE;}

        .even{background-color:#C1E2B3;}

    </style>

</head>

<body>

    <div style=" float:left;border: 1px solid #1B6D85;width: 20%;"><button>查询</button><input id="chaxun" type="text" style="border: 0px; outline: none;"></div>

    <div style="float: left;margin-left: 30px;"><button style="width: 100px;" id="tianjia"  data-toggle="modal" data-target="#myModal2">添加数据</button></div>

    <table border="1" cellspacing="1" cellpadding="1" width="100%">

        <tr><th>型号</th><th>车名</th><th>生产日期</th><th>油耗</th><th>动力</th><th>排量</th><th>价格</th><th>操作</th></tr>

        <tbody id="neirong"></tbody>

    </table>

    <center>

    <ul class="pagination fenye">

    </ul>

    </center>

    <!-------------------------------bootstrap弹窗--修改数据框---------------------------------------------------->

    <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">

    <div class="modal-dialog">

        <div class="modal-content">

            <div class="modal-header">

                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>

                <h4 class="modal-title" id="myModalLabel">修改界面</h4>

            </div>

            <div class="modal-body" id="xiugaijiemian">

                <!--弹窗主题内容-->

            </div>

            <div class="modal-footer">

                <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>

                <button type="button" class="btn btn-primary" id="baocun">保存</button>

            </div>

        </div>

    </div>

</div>

<!--------------------------bootstrap弹框--添加框------------------------------------------------------------>

<div class="modal fade" id="myModal2" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">

    <div class="modal-dialog">

        <div class="modal-content">

            <div class="modal-header">

                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>

                <h4 class="modal-title" id="myModalLabel">添加界面</h4>

            </div>

            <div class="modal-body" id="tianjiajiemian">

            </div>

            <div class="modal-footer">

                <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>

                <button type="button" class="btn btn-primary tianjiabaocun">保存</button>

            </div>

        </div><!-- /.modal-content -->

    </div><!-- /.modal -->

</div>

</body>

</html>

js代码：

$(document).ready(function(){

    page = 1;

    jiazai();

    LoadXinXi();

     $("#chaxun").keyup(function(){      /*这个事件要放到document里边*/

    jiazai();

    LoadXinXi();

})

})

function jiazai()

{

            var aa=$("#chaxun").val();

                 $.ajax({

                type:"post",

                url:"chuli.php",

                async:false,

                data:{aa:aa,page:page},

                dataType:"text",

                success:function(data)

                {

                    var str="";

                    var hang=data.split("|");

                    for(var i=0;i<hang.length;i++)

                    {

                        var lie=hang[i].split("^");

                            var bb=lie[2]; /* 取brand表中的类型名,把输出的数据改掉----------*/

                            $.ajax({

                                type:"post",

                                url:"chuli1.php",

                                async:false,

                                data:{bb:bb},

                                dataType:"text",

                                success:function(d){

                                    bb=d;

                                }

                            });

                        /*--------------------------------*/

                        str+="<tr><td>"+lie[1]+"</td><td>"+bb+"</td><td>"+lie[3]+"</td><td>"+lie[4]+"</td><td>"+lie[5]+"</td><td>"+lie[6]+"</td><td>"+lie[7]+"</td><td><button class='shanchu' bs='"+lie[0]+"'>删除</button> <button class='xiugai' data-toggle='modal' data-target='#myModal' xg='"+lie[0]+"'>修改</button></td></tr>";

                                                                                                                                                                                      /*给删除按钮添加一个bs属性,用来下边点击是获取*/

                    }

                    $("#neirong").html(str);

                    /*换行变色处理------------------*/

                    $("tr:even").addClass("even");

                    $("tr:odd").addClass("odd");

                    /*----------------------------*/

    /*----添加数据------------------------------------------------------------------------*/

         $("#tianjia").click(function(){

              var jiastr="型号：<input type='text' id='xinghao1'><br><br>车名：<input type='text' id='cheming1'><br><br>生产日期：<input type='text' id='riqi1'><br><br>油耗：<input type='text' id='youhao1'><br><br>动力：<input type='text' id='dongli1'><br><br>排量：<input type='text' id='pailiang1'><br><br>价格：<input type='text' id='jiage1'>";

              $("#tianjiajiemian").html(jiastr);

              $(".tianjiabaocun").click(function(){

                                      var xinghao1=$("#xinghao1").val();

                                    var cheming1=$("#cheming1").val();

                                    var riqi1=$("#riqi1").val();

                                    var youhao1=$("#youhao1").val();

                                    var dongli1=$("#dongli1").val();

                                    var pailiang1=$("#pailiang1").val();

                                    var jiage1=$("#jiage1").val();

                                    $.ajax({

                                        type:"post",

                                        url:"tianjia.php",

                                        async:false,

                                        data:{xinghao1:xinghao1,cheming1:cheming1,riqi1:riqi1,youhao1:youhao1,dongli1:dongli1,pailiang1:pailiang1,jiage1:jiage1},

                                        dataType:"text",

                                        success:function(ddd)

                                        {

                                            if(ddd=="111")

                                            {

                                                jiazai();

                                            }else

                                            {

                                                alert("添加失败");

                                            }

                                        }

                                    })

              })

          })

    /*----------------------------------------------------------------------------------*/

    /*删除处理---------------------------------------------------------------------------------*/

                   $(".shanchu").click(function(){

                        var bs=$(this).attr("bs");

                        if(confirm("确定删除么")){     /* 弹出确定删除框,确定删除,取消不删除*/

                        $.ajax({

                            type:"post",

                            url:"shanchu.php",

                            async:true,

                            data:{bs:bs},

                            dataType:"text",

                            success:function(da)

                            {

                                if(da=="ok")

                                {

                                    jiazai();

                                }

                                else

                                {

                                    alert("删除失败");

                                }

                            }

                        })

                    }

                    })

    /*-----------------------删除处理结束-----------------------------------*/

    /*修改----------------------------------------------------------------------------*/

                    $(".xiugai").click(function(){

                        var xg=$(this).attr("xg");

                        var str1="";

                        $.ajax({

                            type:"post",

                            url:"xiugai.php",

                            async:false,

                            data:{xg:xg},

                            dataType:"text",

                            success:function(xiugai)

                            {

                                lie=xiugai.split("^");

                                var bb=lie[2];

                            $.ajax({

                                type:"post",

                                url:"chuli1.php",

                                async:false,

                                data:{bb:bb},

                                dataType:"text",

                                success:function(d){

                                    bb=d;

                                }

                            })          /* 设置一个隐藏的文本,用来保存code值,以便下边取到*/

                                str1="<input type='hidden' id='canshu' value='"+lie[0]+"'>型号：<input type='text' id='xinghao' value='"+lie[1]+"'><br><br>车名：<input type='text' id='cheming'  value='"+bb+"'><br><br>生产日期：<input type='text' id='riqi'  value='"+lie[3]+"'><br><br>油耗：<input type='text' id='youhao'  value='"+lie[4]+"'><br><br>动力：<input type='text' id='dongli'  value='"+lie[5]+"'><br><br>排量：<input type='text' id='pailiang'  value='"+lie[6]+"'><br><br>价格：<input type='text' id='jiage'  value='"+lie[7]+"'>";

                                $("#xiugaijiemian").html(str1);    /*给弹出框添加文本框*/

                                $("#baocun").click(function(){

                                    var code=$("#canshu").val();

                                    var xinghao=$("#xinghao").val();

                                    var cheming=$("#cheming").val();

                                    var riqi=$("#riqi").val();

                                    var youhao=$("#youhao").val();

                                    var dongli=$("#dongli").val();

                                    var pailiang=$("#pailiang").val();

                                    var jiage=$("#jiage").val();

                                    $.ajax({

                                        type:"post",

                                        url:"xiugaihou.php",

                                        async:true,

                                        data:{code:code,xinghao:xinghao,cheming:cheming,riqi:riqi,youhao:youhao,dongli:dongli,pailiang:pailiang,jiage:jiage},

                                        dataType:"text",

                                        success:function(dd)

                                        {

                                            if(dd=="111")

                                            {

                                                jiazai();

                                            }else

                                            {

                                                alert("修改失败");

                                            }

                                        }

                                    })

                                })

                            }

                        })

                    })

    /*------------------------修改救赎---------------------------------------------------------------*/

                }

        })

};

    /*------------------------------------------------*/

function LoadXinXi()

{

    var str = "";

    var minys = 1;

    var maxys = 1;

    var aa=$("#chaxun").val();

    //查总页数

    $.ajax({

            async:false,

            url:"zongshu.php",

            data:{aa:aa},

            type:"POST",

            dataType:"TEXT",

            success: function(d){

                    maxys = d;

                }

        });

    str += "<li><a>总共："+maxys+"页</a></li> ";

    str += "<li id='prev'><a>上一页</a></li>";

    for(var i=page-2;i<page+3;i++)

    {

        if(i>=minys && i<=maxys)

        {

            if(i==page)

            {

                str += "<li class='dangqian' bs='"+i+"'><a>"+i+"</a></li> &nbsp;";

            }

            else

            {

                str += "<li class='list' bs='"+i+"'><a>"+i+"</a></li> &nbsp;";

            }

        }

    }

    str += "<li id='next'><a>下一页</a></li>"; 

    $(".fenye").html(str);

    //给上一页添加点击事件

    $("#prev").click(function(){

            page = page-1;

            if(page<)

            {

                page=1;

            }

            jiazai(); //加载数据

            LoadXinXi(); //加载分页信息

        })

    //给下一页加点击事件

    $("#next").click(function(){

            page = page+1;

            if(page>maxys)

            {

                page=maxys;

            }

            jiazai(); //加载数据

            LoadXinXi(); //加载分页信息

        })

    //给中间的列表加事件

    $(".list").click(function(){

            page = parseInt($(this).attr("bs"));

            jiazai(); //加载数据

            LoadXinXi(); //加载分页信息

        })

}

几个处理页面代码

1.关键字查询和分页 chuli.php

<?php

include("DBDA.class.php");

$db=new DBDA();

$aa=$_POST["aa"];

$page = $_POST["page"];

$num = 10;

$tiao = ($page-1)*$num;

$tj="";

if(!empty($aa))

{

    $tj=" name like '%{$aa}%' ";

}else

{

    $tj=" 1=1 ";

}

$sql="select * from car where ".$tj." limit {$tiao},{$num}";

$attr=$db->StrQuery($sql);

$attr1=str_replace($aa, "<span style='color:red'>{$aa}</span>", $attr);

echo $attr1;

?>

2.计算数据总条数 zongshu.php

<?php

include("DBDA.class.php");

$db = new DBDA();

$aa = $_POST["aa"];

$num = 10;

$sql = "select count(*) from car where name like '%{$aa}%'";

$zts = $db->StrQuery($sql);

echo ceil($zts/$num);

?>

3.把汽车表中的brand行改名字 chuli1.php

<?php

include("DBDA.class.php");

$db=new DBDA();

$bb=$_POST["bb"];

$sql="select brand_name from brand where brand_code='{$bb}'";

$atr=$db->StrQuery($sql);

echo $atr;

?>

3.删除处理页面 shanchu.php

<?php

include("DBDA.class.php");

$db=new DBDA();

$bs=$_POST["bs"];

$sql="delete from car where code='{$bs}'";

if($db->query($sql,0))

{

    echo "ok";

}else

{

    echo "no";

}

?>

4.添加处理界面 tianjia.php

<?php

include("DBDA.class.php");

$db=new DBDA();

$xinghao=$_POST["xinghao1"];

$cheming=$_POST["cheming1"];

$riqi=$_POST["riqi1"];

$youhao=$_POST["youhao1"];

$dongli=$_POST["dongli1"];

$pailiang=$_POST["pailiang1"];

$jiage=$_POST["jiage1"];

$sql="insert into car values('b001','{$xinghao}','{$cheming}','{$riqi}','{$youhao}','{$dongli}','{$pailiang}','{$jiage}','');";

if($db->Query($sql,0))

{

    echo "111";

}else

{

    echo "222";

}

?>

5.修改前给弹出框中文本框添加原始内容 xiugai.php

<?php

include("DBDA.class.php");

$db=new DBDA();

$xg=$_POST["xg"];

$sql="select * from car where code='{$xg}'";

echo $db->StrQuery($sql);

?>

6.修改后处理页面 xiugaihou.php

<?php

$code=$_POST["code"];

$xinghao=$_POST["xinghao"];

$cheming=$_POST["cheming"];

$riqi=$_POST["riqi"];

$youhao=$_POST["youhao"];

$dongli=$_POST["dongli"];

$pailiang=$_POST["pailiang"];

$jiage=$_POST["jiage"];

include("DBDA.class.php");

$db=new DBDA();

$sql="update car set name='{$xinghao}',brand='{$cheming}',time='{$riqi}',oil='{$youhao}',powers='{$dongli}',exhaust='{$pailiang}',price='{$jiage}' where code='{$code}'";

 if($db->query($sql,0))

{

    echo "111";

}else

{

    echo "222";

}

?>

巴特西

PHP、AJAX综合练习（增、删、改、查、分页、模糊查询）

最新文章

热门文章