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

提示：扫一扫查出行
【扫一扫了解最新限行尾号】
复制提示

先来几张效果图

主页面分页显示：

关键字查询，关键字描红

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

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

主页面代码

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