全部 android asp.net C/C++ cshap IOS Java javascript nodejs perl php python ruby web容器 其他 前端 数据库 第三方平台 混合式APP 网络 系统 默认分类

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

0 85

先来几张效果图

主页面分页显示:

关键字查询,关键字描红

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

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

主页面代码

<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<1)
            {
                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";
}
?>

热忱回答0