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

先来几张效果图

主页面分页显示:

PHP、AJAX综合练习(增、删、改、查、分页、模糊查询)_第1张图片

关键字查询,关键字描红

PHP、AJAX综合练习(增、删、改、查、分页、模糊查询)_第2张图片

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

PHP、AJAX综合练习(增、删、改、查、分页、模糊查询)_第3张图片

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

PHP、AJAX综合练习(增、删、改、查、分页、模糊查询)_第4张图片

主页面代码

<meta charset="UTF-8" />
    <title>Documenttitle>
    
    <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>
    
    
    
    <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">×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>


<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">×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>
    div>
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+=""+lie[1]+"><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 += "
  • ><a>"+i+"a>li>  "; } else { str += "<li class='list' bs='"+i+"'><a>"+i+"a>li>  "; } } } 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, "{$aa}", $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";
    }
    ?>

     

    转载于:https://www.cnblogs.com/xingyue1988/p/6270079.html

    你可能感兴趣的:(PHP、AJAX综合练习(增、删、改、查、分页、模糊查询))