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 ...
随机推荐
- nodejs的第三天学习笔记
一. CommonJS 规范 1.1nodejs 与 commonjs 之间的关系: 1)nodejs是一种服务器语言. a)开启服务的能力 b)文件读写的能力 服务器:就是一台安装了服务软件 2)c ...
- Android之Dialer之紧急号码
Android之Dialer之紧急号码 e over any other (e.g. supplementary service related) number analysis. a) 112 an ...
- contiki-process结构体
struct process { struct process *next; #if PROCESS_CONF_NO_PROCESS_NAMES #define PROCESS_NAME_STRING ...
- Lander-Waterman model
参考: Lander-Waterman Model 这个模型是鸟枪法测序和基因组装的最基本的理论模型,它揭示了测序深度与覆盖度之间的关系. 该模型回答了一个最基本的问题:How many reads ...
- linux command
ubuntu start network:sudo service network-manager start
- MyEclipse 不能编译Java类到Classes文件夹
设置Java Build Path -> Resource -> Default output folder 到一个新的文件夹XXXproject/WebContent/WEB-INF/c ...
- ireport5.6+jasperreport6.3开发(一)--中文环境配置在
ireport在pdf的情况下无法显示中文字的解决方法 1,首先下载宋体的ttf(注意ttc的不行)下载链接如下(注意你可以用其他的ttf不一定要宋体) http://files.cnblogs.co ...
- pom.xml里有红叉报错的解决办法
pom.xml里有红叉报错的解决办法一: 1.把鼠标点在报的错上发现pom.xml报如下错误: Multiple annotations found at this line: - Failure t ...
- 【转】Expire Google Drive Files 让Google Docs云盘共享连接在指定时间后自动失效
最近在清理Google Docs中之前共享过的文件链接,发现Google Docs多人协作共享过的链接会一直存在,在实际操作中较不灵活.正好订阅的RSS推送了Pseric写的这篇文章 - Expire ...
- 13 个免费的 PNG 图像的优化和压缩工具
图像格式有许多种不同类型,在互联网上最常见的有JPEG.GIF.BMP.TIFF和PNG.每一种图像格式都有它自己的用途,比如GIF是用于动画的,JPEG是用于高清图片的,这种图片在保存或者调整大小后 ...