学习记录——使用PHP实现数据增删查改等基本功能（前后端分离）
萌新初次学习服务器端语言，分享学习经验
实现功能:1.显示数据表 2.对数据进行分页 3.对数据进行增删查改
由于本萌新采用前后端完全分离方案，所以数据传输用的ajax，为了提高代码的复用性，我将Jquery中的ajax方法封装到了一个js方法中
public.js
数据库连接部分
linkSql.php
1.显示数据表部分
前端代码
用js来遍历传送过来的数据，并打印到表格中,其中pageIndex是当前页，pageData是总页数
//显示数据
function paging(page){
if(page=='first'){
pageIndex=1;
}
else if(page=='pre' && pageIndex>1){
pageIndex--;
}
else if(page=='next' && pageIndex<pageData){
pageIndex++;
}
else if(page=='last'){
pageIndex=pageData;//总行数/5==总页数
}
var obj=new Object();
obj.pageIndex=pageIndex;
doData("display.php",obj,function(data){
$('#searchText').empty();
$('#page').empty();
$('#data').empty();
$.each(data,function(index,item){
$('#data').append(
"<tr>"+
"<td>"+item.Num+"</td>"+
"<td>"+item.UserName+"</td>"+
"<td>"+item.Sex+"</td>"+
"<td>"+item.UserPassword+"</td>"+
"<td>"+item.Email+"</td>"+
"<td>"+item.Phone+"</td>"+
"<td><a href='Edit.php?"+item.Num+"'>编辑</a>"+"/"+
"<a href=javascript:del("+item.Num+")>删除</a></td>"+
"</tr>"
);
});
$('#page').append(
'<a href="javascript:void(0)" onclick=paging("first")>首页</a> '+
'<a href="javascript:void(0)" onclick=paging("pre")>上一页</a> '+
'<a href="javascript:void(0)" onclick=paging("next")>下一页</a> '+
'<a href="javascript:void(0)" onclick=paging("last")>尾页</a> '+
"<a>当前页:"+pageIndex+"</a>"+
"<a>/</a>"+
"<a>"+pageData+"</a> "+
"<a>|跳转至:</a>"+
"<input style='width:30px' type='text' autocomplete=off id=txtJump />"+
"<input type='button' value='跳转' onclick='jump_paging()'/>"
);
});
setCookie("pageIndex",pageIndex);
}
后台代码
display.php
2.分页
需求:
1.有首页、上一页、下一页、尾页这些点击链接
2.显示当前页数和总页数
3.能输入页数跳转
4.刷新页面当前页不会回到首页
实现1.在显示数据的功能中就已经实现了首页等点击链接，只是还没有初始化当前页和获取总页数
把当前页和总页数设置为全局变量
var pageData=0;//总数据显示页数
var pageIndex=1;//页面索引，默认为第一页
用php获取数据的行数
page.php
前端接收数据
本萌新设置的是1页显示5个数据，所以总数据/5就是页数
我们需要在页面一加载就获取到页数
需求1实现完毕后，需求2页也就已经实现了
实现3：输入框和按钮都在显示数据的方法中给出了
"<input style='width:30px' type='text' autocomplete=off id=txtJump />"+
"<input type='button' value='跳转' onclick='jump_paging()'/>"
点击跳转执行jump_paging()方法
只需要把输入框中的值赋值给pageIndex 就能简单实现
实现4：这才是最关键的部分，前端部分全部都是由js代码实现，页面一旦刷新必然会初始化，在这里本萌新也没想到什么更好的办法，于是用了js的cookie
如果本文有幸被看到并且知道更好的方法，一定要记得留言告诉我哈~
本萌新这个程序其实还有个小问题，就是由于ajax原理是异步
所以出现了这么一个现象，当前页都显示了，可是总页数的显示却为0
于是我把显示数据的方法在window.onload=fn 中，因为这个方法的加载在$(window).read(fn)之后，其实我并不愿意这样写，实在没办法了。。汗
3.对数据进行增删查改
需求：对数据编辑、删除、查询、添加
1.编辑数据
由于自增ID是唯一字段，所以只好通过地址传参方式来传送ID号
首先需要一个编辑界面
edit.php
<!doctype html>
<html>
<head>
<meta charset="utf-8"/>
<title>修改用户信息</title>
<script type="text/javascript" src="js/jquery-1.11.3.min.js"></script>
<script type="text/javascript" src="js/public.js"></script>
<script type="text/javascript">
var num=window.location.search.slice(window.location.search.lastIndexOf("?")+1);
var sex;
//获取用户序列号
$(function(){
document.getElementById("txtNum").value=num;
});
function man(){
sex="男";
}
function woman(){
sex="女";
}
function edit(){
var obj=new Object();
obj.num=num;
obj.name=document.getElementById("txtName").value;
obj.sex=sex;
obj.password=document.getElementById("txtPassword").value;
obj.email=document.getElementById("txtEmail").value;
obj.phone=document.getElementById("txtPhone").value;
doData("editVal.php",obj,function(data){
if(data.message=='true'){
window.location.href="doSql.php";
}
else{
alert('修改失败');
}
});
}
</script>
</head>
<body>
<div>Num:<input type='text' disabled="disabled" id="txtNum" autocomplete="off"></div>
<div>用户名:<input type='text' id="txtName" autocomplete="off" placeholder="请输入用户名"></div>
<div class="sex">
<div class="header"><span>性别:</span></div>
<div class="radio">
<input type="radio" name="sex" onclick="man()"/>男
<input type="radio" name="sex" onclick="woman()"/>女
</div>
</div>
<div>密码:<input type='password' id="txtPassword" placeholder="请输入密码"></div>
<div>邮箱:<input type='text' autocomplete="off" id="txtEmail" placeholder="email"></div>
<div>联系号码:<input type='text' autocomplete="off" id="txtPhone" placeholder="Phone"></div>
<div>
<input type="button" value="提交修改" onclick="edit()"/>
<input type="button" value="返回" onclick="window.location.href='doSql.php'"/>
</div>
</body>
</html>
编辑功能的数据处理代码
editVal.php
<?php
include 'linkSql.php';
$num=$_POST['num'];
$name=$_POST['name'];
$sex=$_POST['sex'];
$password=$_POST['password'];
$email=$_POST['email'];
$phone=$_POST['phone'];
$json_flag=array('message'=>'false');
$json_obj=json_encode($json_flag);
if(empty($name)){
die($json_obj);
}
if(empty($sex)){
die($json_obj);
}
if(empty($password)){
die($json_obj);
}
if(empty($email)){
die($json_obj);
}
if(empty($phone)){
die($json_obj);
}
$sql="UPDATE myguests SET UserName='$name',Sex='$sex',UserPassword='$password',Email='$email',
Phone='$phone' WHERE Num=$num";
$retval=$conn->query($sql);
$json_flag['message']='true';
$json_obj=json_encode($json_flag);
echo $json_obj;
?>
2.删除
删除非常简单，只要把id号通过ajax传给后台代码就OK
deleteVal.php
3.添加
add.php
<!doctype html>
<html>
<head>
<meta charset="utf-8"/>
<title>添加用户信息</title>
<script type="text/javascript" src="js/jquery-1.11.3.min.js"></script>
<script type="text/javascript" src="js/public.js"></script>
<script type="text/javascript">
function man(){
sex="男";
}
function woman(){
sex="女";
}
function edit(){
var obj=new Object();
obj.name=document.getElementById("txtName").value;
obj.sex=sex;
obj.password=document.getElementById("txtPassword").value;
obj.email=document.getElementById("txtEmail").value;
obj.phone=document.getElementById("txtPhone").value;
doData("addVal.php",obj,function(data){
if(data.message==true){
window.location.href="doSql.php";
}
else{
$("#error").text('用户名或密码已存在');
}
});
}
</script>
</head>
<body>
<div>用户名:<input type='text' id="txtName" autocomplete="off" placeholder="请输入用户名"></div>
<div class="sex">
<div class="header"><span>性别:</span></div>
<div class="radio">
<input type="radio" name="sex" onclick="man()"/>男
<input type="radio" name="sex" onclick="woman()"/>女
</div>
</div>
<div>密码:<input type='password' id="txtPassword" placeholder="请输入密码"></div>
<div>邮箱:<input type='text' autocomplete="off" id="txtEmail" placeholder="email"></div>
<div>联系号码:<input type='text' autocomplete="off" id="txtPhone" placeholder="Phone"></div>
<div>
<input type="button" value="添加" onclick="edit()"/>
<input type="button" value="返回" onclick="window.location.href='doSql.php'"/>
</div>
<div id="error"></div>
</body>
</html>
addVal.php
4.查询
查询就复杂点：
需求：1.通过关键字就能查询到数据、2.同样有分页功能
首先需要1个输入框和按钮
查询数据的js代码
//查询数据
function getSearch(page){
var obj_search=new Object();
obj_search.search=document.getElementById("txtSearch").value;
PageSearch(obj_search);
if(page=='first'){
pageIndex=1;
}
else if(page=='pre' && pageIndex>1){
pageIndex--;
}
else if(page=='next' && pageIndex<pageNumSearch){
pageIndex++;
}
else if(page=='last'){
pageIndex=pageNumSearch;//总行数/5==总页数
}
var obj=new Object();
obj.pageIndex=pageIndex;
obj.search=document.getElementById("txtSearch").value;
doData("searchVal.php",obj,function(data){
$('#searchText').empty();
$('#data').empty();
$('#page').empty();
if(data.message=='false'){
$('#searchText').append("未找到结果");
}
else{
$.each(data,function(index,item){
$('#data').append(
"<tr>"+
"<td>"+item.Num+"</td>"+
"<td>"+item.UserName+"</td>"+
"<td>"+item.Sex+"</td>"+
"<td>"+item.UserPassword+"</td>"+
"<td>"+item.Email+"</td>"+
"<td>"+item.Phone+"</td>"+
"<td><a href='Edit.php?"+item.Num+"'>编辑</a>"+"/"+
"<a href=javascript:del("+item.Num+")>删除</a></td>"+
"</tr>"
);
});
}
$('#page').append(
'<a href="javascript:void(0)" onclick=paging("first")>返回</a> '+
'<a href="javascript:void(0)" onclick=getSearch("first")>首页</a> '+
'<a href="javascript:void(0)" onclick=getSearch("pre")>上一页</a> '+
'<a href="javascript:void(0)" onclick=getSearch("next")>下一页</a> '+
'<a href="javascript:void(0)" onclick=getSearch("last")>尾页</a> '+
"<a>当前页:"+pageIndex+"</a>"+
"<a>/</a>"+
"<a>"+pageNumSearch+"</a> "+
"<a>|跳转至:</a>"+
"<input style='width:30px' type='text' autocomplete=off id=txtSearchJump />"+
"<input type='button' value='跳转' onclick='jump_search()'/>"
);
});
}
返回查询结果
searchVal.php
获取查询结果页数的js代码
obj是关键字对象
返回查询数据的行数
pageSearch.php
这里本萌新并没有实现刷新停留在查询结果页面的功能，还没想出啥好点子，其实我也还在研究中啦~
最后把前端增删查改以及分页的代码总结下，可以直接用(其他文件的代码已经在上面都总结过了)
doSql.php
<!doctype html>
<html>
<head>
<meta charset="utf-8"/>
<meta name="portview" content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no"/>
<title>后台数据管理系统</title>
<script type="text/javascript" src="js/jquery-1.11.3.min.js"></script>
<script type="text/javascript" src="js/public.js"></script>
<script type="text/javascript">
var pageData=0;//总数据显示页数
var pageNumSearch=0;//查询显示页数
var pageIndex=1;//页面索引，默认为第一页
//设置cookie
function setCookie(str, strValue)
{
var exp = new Date();
exp.setTime(exp.getTime() + 1 * 24 * 60 * 60 * 1000);
document.cookie = str + "=" + strValue + ";expires=" + exp.toGMTString();
}
//获取cookie
function getCookie(str)
{
var arr = document.cookie.match(new RegExp("(^| )" + str + "=([^;]*)(;|$)"));
if (arr != null)
{
return unescape(arr[2]); //unescape() 函数可对通过 escape() 编码的字符串进行解码。
}
return null;
}
//获取页数
$(function(){
PageData();
});
//为了防止总页数显示为0,显示数据在页数获取之后
window.onload=function(){
pageIndex=getCookie("pageIndex");
if(pageIndex==null){
pageIndex=1;
}
paging();
};
//删除
function del(id){
if(confirm("你确定删除这条数据吗?")){
var obj=new Object();
obj.num=id;
doData("deleteVal.php",obj,function(data){
if(data.message=='true'){
window.location.href='doSql.php';
}
else{
alert("数据删除失败");
}
});
}
}
//总数据页面,指定页数跳转
function jump_paging(){
pageIndex=document.getElementById('txtJump').value;
paging();
}
//查询数据页面,指定数据跳转
function jump_search(){
pageIndex=document.getElementById('txtSearchJump').value;
search();
}
//查询数据
function getSearch(page){
var obj_search=new Object();
obj_search.search=document.getElementById("txtSearch").value;
PageSearch(obj_search);
if(page=='first'){
pageIndex=1;
}
else if(page=='pre' && pageIndex>1){
pageIndex--;
}
else if(page=='next' && pageIndex<pageNumSearch){
pageIndex++;
}
else if(page=='last'){
pageIndex=pageNumSearch;//总行数/5==总页数
}
var obj=new Object();
obj.pageIndex=pageIndex;
obj.search=document.getElementById("txtSearch").value;
doData("searchVal.php",obj,function(data){
$('#searchText').empty();
$('#data').empty();
$('#page').empty();
if(data.message=='false'){
$('#searchText').append("未找到结果");
}
else{
$.each(data,function(index,item){
$('#data').append(
"<tr>"+
"<td>"+item.Num+"</td>"+
"<td>"+item.UserName+"</td>"+
"<td>"+item.Sex+"</td>"+
"<td>"+item.UserPassword+"</td>"+
"<td>"+item.Email+"</td>"+
"<td>"+item.Phone+"</td>"+
"<td><a href='Edit.php?"+item.Num+"'>编辑</a>"+"/"+
"<a href=javascript:del("+item.Num+")>删除</a></td>"+
"</tr>"
);
});
}
$('#page').append(
'<a href="javascript:void(0)" onclick=paging("first")>返回</a> '+
'<a href="javascript:void(0)" onclick=getSearch("first")>首页</a> '+
'<a href="javascript:void(0)" onclick=getSearch("pre")>上一页</a> '+
'<a href="javascript:void(0)" onclick=getSearch("next")>下一页</a> '+
'<a href="javascript:void(0)" onclick=getSearch("last")>尾页</a> '+
"<a>当前页:"+pageIndex+"</a>"+
"<a>/</a>"+
"<a>"+pageNumSearch+"</a> "+
"<a>|跳转至:</a>"+
"<input style='width:30px' type='text' autocomplete=off id=txtSearchJump />"+
"<input type='button' value='跳转' onclick='jump_search()'/>"
);
});
}
//显示数据
function paging(page){
if(page=='first'){
pageIndex=1;
}
else if(page=='pre' && pageIndex>1){
pageIndex--;
}
else if(page=='next' && pageIndex<pageData){
pageIndex++;
}
else if(page=='last'){
pageIndex=pageData;//总行数/5==总页数
}
var obj=new Object();
obj.pageIndex=pageIndex;
doData("display.php",obj,function(data){
$('#searchText').empty();
$('#page').empty();
$('#data').empty();
$.each(data,function(index,item){
$('#data').append(
"<tr>"+
"<td>"+item.Num+"</td>"+
"<td>"+item.UserName+"</td>"+
"<td>"+item.Sex+"</td>"+
"<td>"+item.UserPassword+"</td>"+
"<td>"+item.Email+"</td>"+
"<td>"+item.Phone+"</td>"+
"<td><a href='Edit.php?"+item.Num+"'>编辑</a>"+"/"+
"<a href=javascript:del("+item.Num+")>删除</a></td>"+
"</tr>"
);
});
$('#page').append(
'<a href="javascript:void(0)" onclick=paging("first")>首页</a> '+
'<a href="javascript:void(0)" onclick=paging("pre")>上一页</a> '+
'<a href="javascript:void(0)" onclick=paging("next")>下一页</a> '+
'<a href="javascript:void(0)" onclick=paging("last")>尾页</a> '+
"<a>当前页:"+pageIndex+"</a>"+
"<a>/</a>"+
"<a>"+pageData+"</a> "+
"<a>|跳转至:</a>"+
"<input style='width:30px' type='text' autocomplete=off id=txtJump />"+
"<input type='button' value='跳转' onclick='jump_paging()'/>"
);
});
setCookie("pageIndex",pageIndex);
}
//分页
function PageData(){
doData("page.php",null,function(data){
pageData=Math.ceil(data.rowNum/5);
});
}
//获取查询数据分页
function PageSearch(obj){
doData("pageSearch.php",obj,function(data){
pageNumSearch=Math.ceil(data.rowNum/5);
});
}
</script>
</head>
<body>
<input type="button" id="btnshow" onclick="window.location.href='add.php'" value="添加"/>
<input type="text" autocomplete="off" id="txtSearch" placeholder="请输入关键字"/>
<input type="button" id="btnSearch" value="查询" onclick="getSearch('first')"/>
<div id="searchText"></div>
<table border=1>
<thead>
<tr>
<td>Num</td>
<td>UserName</td>
<td>Sex</td>
<td>UserPassword</td>
<td>Email</td>
<td>Phone</td>
<td>Edit/Delete</td>
</tr>
</thead>
<tbody id="data">
</tbody>
</table>
<div id="page">
</div>
</body>
</html>
学习记录——使用PHP实现数据增删查改等基本功能（前后端分离）的更多相关文章
- SQL Server 表的管理_关于数据增删查改的操作的详解（案例代码）
SQL Server 表的管理_关于数据增删查改的操作的详解(案例代码)-DML 1.SQL INSERT INTO 语句(在表中插入) INSERT INTO 语句用于向表中插入新记录. SQL I ...
- RavenDb学习（二）简单的增删查改
在上一节当中已经介绍了RavenDb的文档设计模式,这一节我们要具体讲一讲如何使用api去访问RavenDb .连接RavenDb var documentStore = new DocumentSt ...
- Django学习笔记009-django models进行数据库增删查改
引入models的定义 from app.models import myclass class myclass(): aa = models. CharField (max_length=No ...
- Django 之restfromwork 序列化组件实现数据增删查改
rest-framework序列化之Serializer models.py from django.db import models # Create your models here. class ...
- php学习笔记：对文件的增删查改等操作
文件的创建: 采用touch()函数,当文件不存在会被创建 例如: <?php header("Content-type: text/html; charset=utf-8" ...
- 基于.net的分布式系统限流组件 C# DataGridView绑定List对象时，利用BindingList来实现增删查改 .net中ThreadPool与Task的认识总结 C# 排序技术研究与对比 基于.net的通用内存缓存模型组件 Scala学习笔记：重要语法特性
基于.net的分布式系统限流组件 在互联网应用中,流量洪峰是常有的事情.在应对流量洪峰时,通用的处理模式一般有排队.限流,这样可以非常直接有效的保护系统,防止系统被打爆.另外,通过限流技术手段,可 ...
- java：Hibernate框架1（环境搭建，Hibernate.cfg.xml中属性含义，Hibernate常用API对象，HibernteUitl，对象生命周期图，数据对象的三种状态，增删查改）
1.环境搭建: 三个准备+7个步骤 准备1:新建项目并添加hibernate依赖的jar文件 准备2:在classpath下(src目录下)新建hibernate的配置文件:hibernate.cf ...
- 利用dbutils工具实现数据的增删查改操作(dbutis入门)
一.前期准备 1.安装数据库(如:mysql5.5) 2.安装Eclipse(如:3.4) 3.下载数据库驱动包 4.下载dbutis工具包 5.在Eclipse创建名为 dbutils 的工程并在工 ...
- MERGE批量增删查改数据
MERGE优点: 在批量处理数据的时候,我可以用到merge一次完成数据处理. 示例代码一: MERGE INTO student AS t using ( AS age) s ON t.Age=s. ...
随机推荐
- 【题解】G.Graph（2015-2016 ACM-ICPC, NEERC, Northern Subregional Contest）
题目链接G题 题意 序列 \(a_1,a_2,⋯,a_n\) 是一个排列, 当且仅当它含有 1 到 n 的所有整数. 排列 \(a_1,a_2,⋯,a_n\) 是一个有向图的拓扑排序,当且仅当对于每条 ...
- OI知识点/得分技巧的归纳总结
网络流 拆点/拆边技巧 题目来源 bzoj1070 题目描述 同一时刻有\(N\)位车主带着他们的爱车来到了汽车维修中心.维修中心共有\(M\)位技术人员,不同的技术人员对不同 的车进行维修所用的时间 ...
- 自己编写k8s
## 基于Docker和Kubernetes的企业级DevOps实践训练营 ### 课程准备 1. 离线镜像包 百度:https://pan.baidu.com/s/1N1AYGCYftYGn6L0Q ...
- uni-app全局属性和方法
全局变量和全局方法是软件开发中常用的技术点! 实现方式大致分为: 1.vuex实现,值变动灵活 2.建立js文件,页面内引用 3.挂载vue实例后使用 4.小程序中的globalData 5.本地存储 ...
- 情话爬虫工具[windows版]
有没有在气氛暧昧的情况下想说点什么却又无话可说?女朋友有没有抱怨过你,只会写代码,一点都不懂情调?这次,是时候要改变她对你的看法了!一键爬取情话,情话全都躺在txt里面.想怎么玩就怎么玩!张口一句情话 ...
- 基数排序（Radix Sort）
基数排序(Radix Sort) 第一趟:个位 收集: 第二趟:十位 第三趟:百位 3元组 基数排序--不是基于"比较"的排序算法 递增就是把收集的过程返过来 算法效率分析 需要r ...
- Goldengate搭建
OGG进程 捕获进程(源端):捕获online redo log或者archived log中增量事务日志 传输进程(源端):把目标端落地的trail文件通过配置的路由信息传输到目标端 网络传输:tc ...
- 从函数到包的Python代码层次
代码层次 Python是一门脚本语言,新建一个.py文件,写点代码,就可以跑起来了,无论放哪都可以.比如where.py文件: print("Where am I?") 那么问题来 ...
- Hexo使用思维导图插件
进入Hexo博客的根目录,执行下面命令安装插件 npm install hexo-simple-mindmap 添加思维导图格式,按层级顺序 {% pullquote mindmap mindmap- ...
- Elastic Search 学习之路（二）——inverted index(反向索引)
这是篇翻译文,图画的挺有意思. Elastic使用非常特殊的数据结构,称作反向索引.反向索引中,包括了一组document中出现的唯一的单词,和对应的单词,所出现的位置.反向索引是在ES中,docum ...