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">×</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">×</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> ";
}
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";
}
?>
PHP、AJAX综合练习（增、删、改、查、分页、模糊查询）的更多相关文章
- django ajax增 删 改 查
具于django ajax实现增 删 改 查功能 代码示例: 代码: urls.py from django.conf.urls import url from django.contrib impo ...
- 好用的SQL TVP~~独家赠送[增-删-改-查]的例子
以前总是追求新东西,发现基础才是最重要的,今年主要的目标是精通SQL查询和SQL性能优化. 本系列主要是针对T-SQL的总结. [T-SQL基础]01.单表查询-几道sql查询题 [T-SQL基础] ...
- iOS FMDB的使用(增,删,改,查,sqlite存取图片)
iOS FMDB的使用(增,删,改,查,sqlite存取图片) 在上一篇博客我对sqlite的基本使用进行了详细介绍... 但是在实际开发中原生使用的频率是很少的... 这篇博客我将会较全面的介绍FM ...
- iOS sqlite3 的基本使用(增 删 改 查)
iOS sqlite3 的基本使用(增 删 改 查) 这篇博客不会讲述太多sql语言,目的重在实现sqlite3的一些基本操作. 例:增 删 改 查 如果想了解更多的sql语言可以利用强大的互联网. ...
- ADO.NET 增 删 改 查
ADO.NET:(数据访问技术)就是将C#和MSSQL连接起来的一个纽带 可以通过ADO.NET将内存中的临时数据写入到数据库中 也可以将数据库中的数据提取到内存中供程序调用 ADO.NET所有数据访 ...
- MVC EF 增 删 改 查
using System;using System.Collections.Generic;using System.Linq;using System.Web;//using System.Data ...
- python基础中的四大天王-增-删-改-查
列表-list-[] 输入内存储存容器 发生改变通常直接变化,让我们看看下面列子 增---默认在最后添加 #append()--括号中可以是数字,可以是字符串,可以是元祖,可以是集合,可以是字典 #l ...
- day 37-8 关于mysql 的增 删 改 查 及联合列表
1 VARCHAR : 字符串的意思 (括号内的数字代表尾数) 输入的字符串在这个范围内都行 CHAR :字符串的意思(区别就有几位数字 必须写几位) INT 整数(位数) 输入的数字 ...
- django单表操作 增 删 改 查
一.实现:增.删.改.查 1.获取所有数据显示在页面上 model.Classes.object.all(),拿到数据后,渲染给前端;前端通过for循环的方式,取出数据. 目的:通过classes(班 ...
- 简单的php数据库操作类代码(增,删,改,查)
这几天准备重新学习,梳理一下知识体系,同时按照功能模块划分做一些东西.所以.mysql的操作成为第一个要点.我写了一个简单的mysql操作类,实现数据的简单的增删改查功能. 数据库操纵基本流程为: 1 ...
随机推荐
- hdu 2521 反素数(打表)
反素数 Time Limit: 2000/1000 MS (Java/Others) Memory Limit: 32768/32768 K (Java/Others)Total Submiss ...
- AC日记——灾后重建 洛谷 P1119
灾后重建 思路: 看到n<=200,思考弗洛伊德算法: 如何floyed呢? floyed是一种动态规划求最短路的算法: 它通过枚举中间点来更新两点之间最短路: 回到这个题本身: 所有点的重建完 ...
- Codeforces 906D Power Tower（欧拉函数 + 欧拉公式）
题目链接 Power Tower 题意 给定一个序列,每次给定$l, r$ 求$w_{l}^{w_{l+1}^{w_{l+2}^{...^{w_{r}}}}}$ 对m取模的值 根据这个公式 每次 ...
- linux挂载新磁盘、分区和开机自动挂载
今天在阿里云虚拟主机里新加了一块磁盘,需要单独挂载到centos7. 挂载过程中遇到了不少问题,记录如下: 查看分区 fdisk -l 其中第一个框和第二个框,是已经分好区的磁盘,第三个硬盘没有分区. ...
- 线程和进程（Java）
一.线程概述 线程是程序运行的基本执行单元.当操作系统(不包括单线程的操作系统,如微软早期的DOS)在执行一个程序时,会在系统中建立一个进程,而在这个进程中,必须至少建立一个线程(这个线程被称为主线程 ...
- JSP高级功能-java之JSP学习第三天(非原创）
文章大纲 一.JSP 标准标签库(JSTL)二.JSP 连接数据库三.JSP XML 数据处理四.JSP JavaBean五.JSP 自定义标签六.JSP 表达式语言七.JSP 异常处理八.JSP 调 ...
- SecureCRT的帮助文档
[Help]->[Help Topics] Ubuntu:file:///usr/share/doc/scrt/SecureCRTHelp/SecureCRT.htm
- linux使用tar命令打包压缩时排除某个文件夹或文件
今天在使用tar命令进行文件夹打包压缩的时候,需要打包压缩masalaPage目录,但是该目录中的2017,2016两个目录中的文件不进行打包压缩 所以通常使用的tar -zcvf masalaPag ...
- Solidworks如何改变零件颜色
如图所示装配体有三个零件,现在我想把移动件的颜色变成红色 鼠标左键单击要改变颜色的零件(这里点击"移动件"),然后在弹出的菜单中选择颜色,最后点击"编辑颜色" ...
- 【SharePoint】K2 for SharePoint 安装笔记【未完工】
0.安装环境说明 0.1.软件版本 OS : Window Server 2012 标准版 SharePoint : 2013标准版 K2 : 4.6.9 0.2.环境结构 SharePoint 20 ...