ajax+php数据增加查询获取删除
先上图
<!DOCTYPE html> <html>
<head>
<meta name="viewport" content="width=device-width" />
<link href="css/bootstrap.min.css" rel="stylesheet" />
<link href="css/button.css" rel="stylesheet" />
<script src="js/jquery.js"></script>
<link href="css/font-awesome.css" rel="stylesheet" />
<link href="css/bootstrap-datetimepicker.min.css" rel="stylesheet" />
<title></title>
<style type="text/css">
.header {
width: %;
padding: 0px;
margin: 0px;
background-color: #699C03;
} .header-nav {
min-width: 1170px;
padding: 15px;
height: 50px;
} .header-nav-left {
float: left;
padding-left: 150px;
width: %;
} .header-nav-left h3 {
font-size: 18px;
line-height: 25px;
margin: 0px;
} .header-nav-right {
float: left;
width: 59.9999%;
position: relative;
} .header-nav-right ul {
padding: 0px;
margin: 0px;
list-style: none;
position: absolute;
right: 25px;
} .header-nav-right ul li {
float: left;
margin-left: 5px;
color: #fff;
} .header-nav-right ul li a {
color: #fff;
text-decoration: none;
} .content {
min-width: 1170px;
padding: 0px;
margin: 0px auto;
} .content-side {
width: %;
float: left;
margin: 20px 0px;
padding: 20px;
} .content-side ul {
padding: 0px 0px 0px 50px;
margin: 0px;
list-style: none;
} .content-side ul li {
margin-bottom: 10px;
} .content-side ul li a {
display: inline-block;
padding: 5px 10px;
border: 1px solid #ddd;
border-radius: 4px;
box-shadow: 0px 0px 5px 2px #eee;
text-decoration: none;
} .content-right {
width: 59.999%;
margin: 20px 0px;
padding: 20px;
float: left;
} .content-right-about {
height: 250px;
width: %;
} .content-right-form {
margin: 0px auto;
padding: 0px;
width: %;
overflow: hidden;
} .write {
margin-top: 10px;
height: 250px;
width: 99.99%;
border: 1px solid #BBBBBB;
border-radius: 4px;
box-shadow: 0px 0px 5px 2px #DDDDDD;
} .btn {
margin-bottom: 5px;
border: 1px solid #ccc;
} .footer {
border-top: 1px solid #bbb;
min-width: 1200px;
margin-top: 20px;
} .submits button {
background-color: #4CB0F9;
border-radius: 4px;
color: #fff;
} .submits button:hover {
background-color: #4F9FCF;
}
.on{
display:none;
}
.uptext{
width:%;
display:none;
z-index:;
}
.uptext-list{
width:900px;
height:auto;
margin:0px auto;
position:fixed;
left:0px;
right:0px;
top:50px;
bottom:0px;
z-index:;
background-color:#fff; }
#pages{
padding:0px;
margin:0px auto;
list-style:none;
}
#pages li{
float:left;
}
.tablebody{
overflow:hidden;
}
</style>
</head>
<body style="position:relative">
<div class="header">
<div class="header-nav">
<div class="header-nav-left">
<h3>网站后台管理</h3>
</div>
<div class="header-nav-right">
<ul>
<li><span>欢迎到来到网站后台</span></li>
<li><a href="" onclick="window.location.reload()">主菜单</a></li>
<li><a href="">网站首页</a></li>
<li><a href="">后台主页</a></li>
<li><a href="">内容发布</a></li>
<li><a href="">内容管理</a></li>
<li><a href="">退出</a></li>
</ul>
</div>
</div>
</div>
<div class="content">
<div class="content-side">
<ul>
<li><a href="">删除内容</a></li>
<li><a href="">更改内容</a></li>
<li><a href="">查询内容</a></li>
<li><a href="">搜索内容</a></li>
</ul>
</div>
<div class="content-right">
<div class="content-right-form">
<form id="myform" action="" method="post">
<dl>
<dt class="lead">标题</dt>
<dd><input id="frist" type="text" name="title" class="form-control" /></dd>
</dl>
<dl>
<dt>内容</dt>
<dd><textarea name="body" style="width:100%;height:250px"></textarea></dd>
</dl>
<div class=" submits row" style="margin-top: 20px;">
<div class="col-lg-6 col-md-6">
<button id="addtext" type="submit" class="pull-left form-control ">增加</button>
</div>
<div class="col-lg-6 col-md-6">
<button type="reset" class="pull-right form-control ">重置</button>
</div>
</div>
</form>
</div>
</div>
<div class="content-right on">
<table cellpadding="" class="table table-bordered">
<tr class="toptr">
<th>标题</th>
<th>内容</th>
<th>删除</th>
</tr>
<tbody class="tablebody"></tbody>
</table>
<ul id="pages"> </ul>
</div>
<div class="content-right on">
<table cellpadding="" class="table table-bordered">
<tr class="toptr">
<th>标题</th>
<th>内容</th>
<th>修改</th>
</tr>
<tbody class="tablebody"></tbody>
</table>
<ul id="pages"> </ul>
</div>
<div class="content-right on">
<table cellpadding="" class="table table-bordered">
<tr class="toptr">
<th>标题</th>
<th>内容</th>
</tr>
<tbody class="tablebody"></tbody>
</table>
<ul id="pages"></ul>
</div>
<div class="uptext">
<div class="uptext-list">
<form id="myform" action="" method="post">
<dl>
<dt class="lead">标题</dt>
<dd><input type="text" name="title" class="form-control" /></dd>
</dl>
<dl>
<dt>内容</dt>
<dd><textarea style="width:100%;height:250px"></textarea></dd>
</dl>
<div class=" submits row" style="margin-top: 20px;">
<div class="col-lg-6 col-md-6">
<button id="uptext-button" type="submit" class=" pull-left form-control ">增加</button>
</div>
<div class="col-lg-6 col-md-6">
<button type="button" id="black" class="pull-right form-control ">取消</button>
</div>
</div>
</form>
</div>
</div>
<div class="content-right on">
<div style="padding:20px;" ><label for="search" id="searchs" style="margin-right:5px;border:1px solid #ccc;border-radius:4px;padding:4px;cursor:pointer;color:#fff;background-color:#4CB0F9">搜索</label><input id="key" style="border:1px solid #bbb;border-radius:4px;line-height:14px;font-size:14px;padding:6px 12px" type="text" placeholder="请输入关键字" /></div>
<table cellpadding="" class="table table-bordered">
<tr class="toptr">
<th>标题</th>
<th>内容</th>
</tr>
<tbody class="tablebody"></tbody>
</table>
<ul id="pages"> </ul>
</div>
</div>
<script>
$(function(){ //增加数据
$("#addtext").on('click', function () {
var $titleval = $("input[id=frist]").val(), $bodyval = $("textarea").val()
if ($titleval == "" || $bodyval == "") {
alert("标题与内容不能为空");
} else {
var datas = {
title:$titleval,
body:$bodyval
};
$.ajax({
type: 'post',
timeout: ,
data: datas,
url: 'add.php',
async: 'false',
success: function (result) {
$("input[type=text]").val('');
$("textarea").val('');
obj = JSON.parse(result);//json字符串类型转换成js对象（如果ajax中指定了dataType为json，那么久不需要转换英文指定了json得到的就是一个对象）
if(obj.eger=="false"){
alert('标题或内容已存在');
}else if(obj=="ture"){
alert('添加成功');
}
} ,
error: function () {
alert('false');
} })
} return false;
})
//end
var table = function () {
var tablebody = '';
$.ajax({
url: 'select.php',
dataType: 'json',
type: 'post',
success: function (result) {
$(".tablebody").empty();
$.each(result.datalist, function (i, data) {
tablebody += "<tr><td>" + data.title + "</td><td>" + data.body + "</td><td style='text-align:cneter'><span><a href='#' id='remove' textid='" + data.ID + "'>删除</a></td></tr>"
})
$(".tablebody").html(tablebody);
}
})
}
var table1 = function(){
var tablebody = '';
$.ajax({
url: 'select.php',
dataType: 'json',
type: 'post',
success: function (result) {
$(".tablebody").empty();
$.each(result.datalist, function (i, data) {
tablebody += "<tr><td id='title'>" + data.title + "</td><td id='bodyval'>" + data.body + "</td><td style='text-align:cneter'><span><a href='#' id='uptext' textid='" + data.ID + "'>修改</a></td></tr>"
})
$(".tablebody").html(tablebody);
}
})
}
//查询翻页star
var page = ,//当前页初始化
onepage = ,//每页数
all = ,
pagenum = ;//页数初始化
var pg = ; //页码索引
var table2 = function () {
var tablebody = '';
var spanhtml='';
$.ajax({
url: 'select.php',
dataType: 'json',
type: 'post',
success: function (result) {
$(".tablebody").empty();
$(".content .content-right").eq().children('ul').empty();
all = result.datalist.length;
pagenum = Math.ceil(all / );
var start = page * onepage,
end = (page + ) * onepage;
$.each(result.datalist, function (i, data){
if (i>=start&&i<end) {
tablebody += "<tr><td id='title'>" + data.title + "</td><td id='bodyval'>" + data.body + "</td></tr>"
}
})
for (pg = ; pg <= ; pg++) {
if (page == pg) {
spanhtml += "<span style='float:left;cursor:pointer;padding:0px 5px ;background-color:#21B9A4;color:#fff'>" + (page + ) + "</span>";//当前页颜色突出
}else
spanhtml += "<span style='float:left;cursor:pointer;padding:0px 5px'>" + (pg+) + "</span>";
}
$(".tablebody").html(tablebody);
$(".content .content-right").eq().children('ul').append("<li style='cursor:pointer'>上一页</li><li style='cursor:pointer'>下一页</li>").children('li:eq(0)').after(spanhtml);
}
})
}
var table3 = function () {
var tablebody = '';
$.ajax({
url: 'select.php',
dataType: 'json',
type: 'post',
success: function (result) {
$(".tablebody").empty();
$.each(result.datalist, function (i, data) {
tablebody += "<tr><td id='title'>" + data.title + "</td><td id='bodyval'>" + data.body + "</td></tr>"
})
$(".tablebody").html(tablebody);
}
})
} $(".content-side ul li").click(function () {
var index = $(this).index();
$(".content .content-right").eq(index + ).removeClass("on").siblings('div.content-right').addClass("on");
if (index == ) {
table1();
} else if(index==){
table2();
} else if (index == ) {
table3();
}else{
table();
}
return false;
})
//上下翻页
$("ul#pages li").live('click', function () {
var index = $(this).index();
if (index == && page > ) {
page--; } else if (index == (pg+) && page < pagenum-) {
page++;
}
else return false;
table2();
})
//跳转页
$("ul#pages span").live('click', function () {
page = $(this).index()-;
table2();
}) //删除数据
$("#remove").live('click', function () {
var textid = $(this).attr('textid');
$.ajax({
type: 'post',
data: {
textid: textid
},
url: 'remove.php',
success: function () {
table();
}
})
return false;
})//end
//修改数据
$("#uptext").live('click', function () {
textid = $(this).attr('textid')；
var title = $(this).parents('td').siblings('#title').html(),
body = $(this).parents('td').siblings('#bodyval').html();
$(".uptext input[type=text]").val(title);
$(".uptext textarea").val(body);
$(".uptext").show();
$("#black").click(function () {
$('.uptext').hide();
})
$('#uptext-button').on('click', function () {
var title = $(".uptext input[type=text]").val(),
bodyval = $(".uptext textarea").val();
var uptext = {
title: title,
bodyval:bodyval,
textid:textid,
}
$.ajax({
type: 'post',
url: 'update.php',
data: uptext,
success: function () {
$('.uptext').hide();
table1();
},
error: function () {
alert('错误');
} })
return false;
})
})//end
//搜索
$("#searchs").live('click', function () {
var $keys = $("input[id=key]").val(),
resulthtml = '',
i = ;
var keys = {
keys: $keys
};
$.ajax({
url: 'search.php',
data: keys,
dataType: 'json',
type: 'post',
success: function (result) {
$(".tablebody").empty();
$.each(result.datalist, function (i,data) {
resulthtml += "<tr><td id='title'>" + data.title + "</td><td id='bodyval'>" + data.body + "</td></tr>"
})
$(".tablebody").html(resulthtml); }
})
})
})
</script>
<div class="footer" style="position:fixed;bottom:20px;left:0px;right:0px">
<p class="text-center">Copyright © 2016.5. </p>
</div>
</body>
</html>
主要改修的还是ajax部分，由于前面写的是基于mvc的后台所以前端部分会有点修改。以下是php后台代码
这一部分说实话弄了我半天，主要是一个去重复的功能，json对象这部分，后面会提到
增加数据
add.pp:
<?php
header("Content-type:text/html;charset=utf8");
$conne = mysql_connect("localhost","root","root")or die("链接失败".@mysql_error());
$select = mysql_select_db("test",$conne)or die("链接失败".@mysql_error());
$utfgbk = mysql_query("set names utf8");
$title = $_REQUEST['title'];
$body = $_REQUEST['body'];
$arraysone = array('one'=>'ture','two'=>'false');
$arrays = array(array('one'=>'ture','two'=>'false'));
$row =mysql_query("select count(*) from article where title='$title'");
$text = mysql_fetch_row($row);
$nam = $text[];
if($nam==){
echo json_encode(array("eger"=>$arraysone['two']));
}else{
$sql = mysql_query("insert into article(title,body)values('$title','$body')");
echo json_encode($arrays[]['one']);
}
?>
有些数据库连接操作我并没有弄到一个文件去，而且增删改查文件都是独立的，
删除部分
remove.php
<?php
header("content-type:text/html;charset=utf8");
$conne = mysql_connect("localhost","root","root")or die("数据库用户名或密码错误".@mysql_error);
$select = mysql_select_db("test",$conne)or die("连接失败".@mysql_error);
$utf = mysql_query("set names uthf8");
$id = $_REQUEST['textid'];
if($id){
mysql_query("delete from article where id=$id");
}else{
echo "false";
}
?>
修改部分
update.php
<?php
header("content-type:text/html;charset=utf8");
$conne =mysql_connect("localhost","root","root")or die("数据库用户名或密码错误".@mysql_error());
$select = mysql_select_db("test",$conne)or die("数据库连接失败".@mysql_error());
$utf = mysql_query("set names utf8");
$id = $_REQUEST['textid'];
$title = $_REQUEST['title'];
$body = $_REQUEST['bodyval'];
$sql=mysql_query("update article set title='$title',body='$body' where id=$id");
mysql_free_result($sql);
?>
查询部分，查询部分我是分开来的，一个是搜索，一个是列出所有内容并分页显示，分页功能写在前端代码部分
这是搜索的后台代码部分
search.php
<?php
header("content-type:text/html;charset=utf8");
$conne =mysql_connect("localhost","root","root")or die("数据库用户名或密码错误".@mysql_error());
$select = mysql_select_db("test",$conne)or die("数据库连接失败".@mysql_error());
$utf = mysql_query("set names utf8");
$arrays = array();
$i=;
$key = $_REQUEST['keys'];
if($key){
$result = mysql_query("select*from article where title like'%$key%' or body like '%$key%'");
while($row = mysql_fetch_array($result,MYSQL_ASSOC)){
$arrays[$i]=$row;
$i++;
}
echo json_encode(array("datalist"=>$arrays));
}else{
$result = mysql_query("select*from article");
while($row = mysql_fetch_array($result,MYSQL_ASSOC)){
$arrays[$i]=$row;
$i++;
}
echo json_encode(array("datalist"=>$arrays));
}
?>
这是查询翻页部分，其实这部分删除和修改及搜索都有用到，所以这是通用的一部分
<?php
header("Content-type:text/html;charset=utf8");
$conne = mysql_connect("localhost","root","root")or die("数据库用户名或密码错误".@mysql_error()) ;
mysql_select_db("test", $conne)or die("数据库连接失败".@mysql_error());
mysql_query("set names utf8");
$listsql = mysql_query("select*from article");
$arrays = array();
$i=;
while($row = mysql_fetch_array($listsql,MYSQL_ASSOC)){
$arrays[$i]=$row;
$i++;
}
echo json_encode(array('datalist'=>$arrays));
?>
写的不好处请大家担待担待比我也刚学PHP不久,有些地方可能漏写什么东西，但是不影响大局
ajax+php数据增加查询获取删除的更多相关文章
- Yii数据库操作增删改查-[增加\查询\更新\删除 AR模式]
在Yii的开发中常常需要去使用Yii的增删改查方法,这些方法又可以多次变化和组合,带来全方位的实现对数据库的处理,下面对这些方法做一些简单的整理和梳理,有遗漏或是BUG,敬请指出.灰常感谢!!! 一. ...
- SQL Server 一列或多列重复数据的查询，删除
业务需求 最近给公司做一个小工具,把某个数据库(数据源)的数据导进另一个数据(目标数据库).要求导入目标数据库的数据不能出现重复.但情况是数据源本身就有重复的数据.所以要先清除数据源数据. 于是就把关 ...
- SQL Server 一列或多列重复数据的查询，删除（转载）
转载来源:https://www.cnblogs.com/sunxi/p/4572332.html 业务需求 最近给公司做一个小工具,把某个数据库(数据源)的数据导进另一个数据(目标数据库).要求导入 ...
- thinkphp+datatables+ajax 大量数据服务器端查询
今天一白天全耗在这个问题上了,知乎2小时除外... 现在19:28分,记下来以备后查. 问题描述:从后台数据库查询人员信息,1w多条,使用一个好看的基于bootstrap的模板 Bootstrap-A ...
- ajax提交数据
ajax提交数据 注意:获取值可以从方法参数传过来 也可以通过jquery获取对应标签的值:同时参数要与请求的动作方法的参数一致,否则值无法映射 发送 ajax (get 方式简写)请求 注 ...
- vue使用element Transfer 穿梭框实现ajax请求数据和自定义查询
vue使用element Transfer 穿梭框实现ajax请求数据和自定义查询 基于element Transfer http://element-cn.eleme.io/#/zh-CN/comp ...
- 腾讯云图片鉴黄集成到C# SQL Server 怎么在分页获取数据的同时获取到总记录数 sqlserver 操作数据表语句模板 .NET MVC后台发送post请求 百度api查询多个地址的经纬度的问题 try{}里有一个 return 语句，那么紧跟在这个 try 后的 finally {}里的 code 会 不会被执行，什么时候被执行，在 return 前还是后? js获取某个日期
腾讯云图片鉴黄集成到C# 官方文档:https://cloud.tencent.com/document/product/641/12422 请求官方API及签名的生成代码如下: public c ...
- net下 Mysql Linq的使用, 更新数据,增加数据,删除数据
net下访问mysql主要有2种方法: 1.字符串拼接访问 a.mysql官网下载并安装mysql-connector-net. b项目中引用mysql.data等 所有增删改查可以通过拼接sql语句 ...
- 用Nodejs+Express搭建web，nodejs路由和Ajax传数据并返回状态，nodejs+mysql通过ajax获取数据并写入数据库
小编自学Nodejs,看了好多文章发现都不全,而且好多都是一模一样的 当然了,这只是基础的demo,经供参考,但是相信也会有收获 今天的内容是用Nodejs+Express搭建基本的web,然后呢no ...
随机推荐
- C#获取CSV文件内容对逗号和引号分隔的处理
我们知道,使用excel工具保存成csv文件时有几个规则: 1.每一行的单元格内容之间用逗号分隔. 2.如果单元格的内容本身有逗号,这个单元格的内容将会用引号包含. 3.如果单元格的内容本身有引号 1 ...
- j.APR连接器整体框图(含SSL实现分析)
APR连接器的思路和bio,nio的整体架构也是类似的,可以看到下面的整体框图: 第一个区别是,对于从Acceptor线程中的socket解析这块,无论是nio还是bio都是在Acceptor线程内直 ...
- SSH框架搭建
1.建项目 2.添加Struts 3.添加String 注意:这里一共是五个包 4.添加Hibernate 添加完成,然后导入数据库 这时候是这样的 把小绿叶放到WEB-INF 5.简单写struts ...
- Python unittest appium
import unittest from appium import webdriver from appium.common.exceptions import NoSuchContextExcep ...
- css学习笔记 6
对于css样式文件的规划方式将直接影响后期对web站点维护的效率,对于大型的复杂站点一般将css样式文件分为两部分:页面的全局定义及处理页面基本布局的css样式文件和处理细节方面的css样式文件.这样 ...
- 关于firstChild,firstElementChild和children
<div> <p>123</p> </div> 在上面这段代码中,如果使用以下js代码 var oDiv=document.getElementByTa ...
- Discuz! X论坛上传附件到100%自动取消上传的原因及解决方案
最近接到一些站长的反馈,说论坛上传附件,到100%的时候自己取消上传了.经查是附件索引表pre_forum_attachment表的aid字段自增值出现了问题,导致程序逻辑返回的aid值实际为一个My ...
- C++内存管理的缩影
都说C++内存管理是个大坑.实际上也确实是这样. C++有析构函数,每当一个对象过期的时候,C++会执行两个动作 1.执行析构函数. 2.将对象和对象的所有数据删除. 很多人就会问了,既然有把对象删除 ...
- Office2010与vs2008不兼容导致的一系列问题（vs设计视图打不开，无法启动Asp.Net Development Server)
vs2008打开aspx文件时设计界面死机的解决 一.突然有一天,在使用vs2008从源视图向设计视图切换时,界面出现了假死现象,重装后亦无效.我从网上搜索原因,发现很多朋友都有类似的问题,但解决方案 ...
- PHP7 错误处理
最近学习了下PHP7新特性教程,记录了一些学习笔记. PHP 7 改变了大多数错误的报告方式.不同于 PHP 5 的传统错误报告机制,现在大多数错误被作为 Error 异常抛出. 这种 Error 异 ...