Ajax页面的加载数据与删除
1.数据库找一张表：
颜色表
2.主页面
主页面的代码用到tbody；
TBODY作用是：
可以控制表格分行下载，从而提高下载速度。
（网页的打开是先表格的的内容全部下载完毕后，才显示出来，分行下载可以先显示部分内容，这样会减少用户等待时间。
使用TBODY的目的是可以使得这些包含在内的代码不用在整个表格都解析后一起显示，就是说如果有多个行，那么如果得到一个TBODY行，就可以先显示一行。
BODY是HTML的文本体，一个HTML文件，只有一个BODY，而在TABLE中可以有多个TBODY。
TBODY这个标签可以控制表格分行下载，当表格内容很大时比较实用，在需要分行下载处加上和，
比如：
以下为引用的内容：head1head2首先显示首先显示再显示再显示foot1foot2
注意：
*1.TBODY元素在浏览器中不会被渲染表示
*2.当不同行间的单元间合并时各单元格所在的行不要加TBODY标签
提示：TBODY元素内包含的有效标签有：TD、TH、TR 特别提示 本例代码的运行将看不到效果，因为表格中的内容比较少，
只有在数据量大而且表格嵌套较多时才看得到效果。 主页面代码：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<script src="jquery-1.11.2.min.js"></script>
</head>
<body>
<h1>显示数据</h1>
<table width="100%" border="1" cellpadding="0" cellspacing="0">
<tr>
<td>代号</td>
<td>名称</td>
<td>操作</td>
</tr>
<tbody id="td"> </tbody>
</table> </body> </html>
<script>
$.ajax({
url:"jiazai.php",
// 显示所有的数据不用写data
dataType:"TEXT",
success:function(data)
{ } });
</script>
图：
回调函数里面是空的，等会回来写；
接着是加载页面：
显示：遍历数组，显示出表的内容，具体：
<?php
include ("db.class.php");
$db = new db();
$sql = "select * from min";
$arr = $db->Query($sql);
//遍历
$str="";
foreach ($arr as $v)
{
$str = $str.implode("-",$v)."|";
//用-把$v拼起来,拼出来是1-红2-蓝,用|分割，拼出来是1-红|2-蓝| }
echo $str;
来看一下输出的是什么：
在最后面多了一条竖线，去竖线：
$str = substr($str,0,strlen($str)-1);
//截取字符串：从第0个开始，截取它的长度-1
//strlen获取字符串长度
再来看：
现在来写回调函数：
<script>
$.ajax({
url:"jiazai.php",
// 显示所有的数据不用写data
dataType:"TEXT",
success:function(data)
{
var str = "";
var hang = data.split("|");
//split拆分字符串
for(var i = 0;i<hang.length;i++)
{
//通过循环取到每一行;拆分出列；
var lie = hang[i].split("-");
str = str+
"<tr><td>"
+lie[0]+
"</td><td>"
+lie[1]+
"</td><td>操作</td></tr>";
}
$("#td").html(str);
//找到td把html代码扔进去
} });
</script>
写完看下页面：
3.接下来就可以写删除了： 先在在最后的一个单元格中添加删除按钮，并传一个主键值：
"</td><td>" +
"<input type='button' ids='"+lie[0]+"' class='sc' value='删除' />" +
//ids里面存上主键值
"</td></tr>";
给删除按钮添加事件，并调用Ajax方法：
**
异步与同步的区别：
同步需要等待返回结果才能继续，异步不必等待，一般需要监听异步的结果
同步是在一条直线上的队列，异步不在一个队列上 各走各的 **
//给删除按钮加上事件
$(".sc").click(function(){
var ids = $(this).attr("ids");
$.ajax({
url:"shanchu.php",
data:{ids:ids},
dataType:"TEXT",
type:"POST",
success:function (d) { }
});
})
回调函数等等回来写；
继续删除处理页面：
<?php
include ("db.class.php");
$db = new db();
$ids = $_POST["ids"];
$sql = "delete from min WHERE ids='{$ids}'";
if($db ->Query($sql,0))
{
echo "ok";
}
else{
echo "no";
}
这样来看：
点击删除，删掉以后不刷新页面， 若是让他自动加载数据，需要把加载数据的代码封装成一个方法，删除的时候调用此方法；就哦可了
主页面代码：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<script src="jquery-1.11.2.min.js"></script>
</head>
<body>
<h1>显示数据</h1>
<table width="100%" border="1" cellpadding="0" cellspacing="0">
<tr>
<td>代号</td>
<td>名称</td>
<td>操作</td>
</tr>
<tbody id="td"> </tbody>
</table> </body> </html>
<script> //调用load方法
load();
//把加载数据封装成一个方法
function load()
{
$.ajax({
url: "jiazai.php",
// 显示所有的数据不用写data
dataType: "TEXT",
success: function (data) {
var str = "";
var hang = data.split("|");
//split拆分字符串
for (var i = 0; i < hang.length; i++) {
//通过循环取到每一行;拆分出列；
var lie = hang[i].split("-");
str = str +
"<tr><td>"
+ lie[0] +
"</td><td>"
+ lie[1] +
"</td><td>" +
"<input type='button' ids='" + lie[0] + "' class='sc' value='删除' />" +
//ids里面存上主键值
"</td></tr>";
}
$("#td").html(str);
//找到td把html代码扔进去
//给删除按钮加上事件
$(".sc").click(function () {
var ids = $(this).attr("ids");
$.ajax({
url: "shanchu.php",
data: {ids: ids},
dataType: "TEXT",
type: "POST",
success: function (d) {
if (d.trim() == "ok") {
alert("删除成功");
//调用加载数据的方法
load();
}
else {
alert("删除失败");
}
}
});
})
}
});
}
</script>
删除页面代码：
<?php
include ("db.class.php");
$db = new db();
$ids = $_POST["ids"];
$sql = "delete from min WHERE ids='{$ids}'";
if($db ->Query($sql,0))
{
echo "ok";
}
else{
echo "no";
}
Ajax页面的加载数据与删除的更多相关文章
- js中对arry数组的各种操作小结 瀑布流AJAX无刷新加载数据列表--当页面滚动到Id时再继续加载数据 web前端url传递值 js加密解密 HTML中让表单input等文本框为只读不可编辑的方法 js监听用户的键盘敲击事件，兼容各大主流浏览器 HTML特殊字符
js中对arry数组的各种操作小结 最近工作比较轻松,于是就花时间从头到尾的对js进行了详细的学习和复习,在看书的过程中,发现自己平时在做项目的过程中有很多地方想得不过全面,写的不够合理,所以说啊 ...
- js/jquery控制页面动态加载数据 滑动滚动条自动加载事件--转他人的
js/jquery控制页面动态加载数据 滑动滚动条自动加载事件--转他人的 相信很多人都见过瀑布流图片布局,那些图片是动态加载出来的,效果很好,对服务器的压力相对来说也小了很多 有手机的相信都见过这样 ...
- ajax按楼层加载数据
代码如下: <!doctype html> <html> <head> <meta charset="utf-8"> <tit ...
- 瀑布流AJAX无刷新加载数据列表--当页面滚动到Id时再继续加载数据
瀑布流加载显示数据,在当下已经用的很普遍,尤其是我们在做网上商城时,在产品列表页面已经被普遍使用. 对于实现瀑布流布局的解决方案主要有以下两种方式: 1.对每一条显示数据使用绝对定位+浮动的方式,这样 ...
- Java Web SpringMVC AJAX，实现页面懒加载数据
因为做的微信端的网页,所以在显示后台数据的时候,要么分页,要么全部加载数据,开始分页对于用户来说,其实体验不是很好,毕竟要去不断的点击下一页,但是如果我把全部数据读取出来的话,但用户可能也就看前面几条 ...
- 巧用ajax请求服务器加载数据列表时提示loading
我们利用weui.js中的weui.loading为效果,ajax的beforeSend与complete方法,做一个加载数据时会有几秒的 loading... 要在页面需要加载的JS文件: < ...
- Ajax 滚动异步加载数据
第一种情况:单个div滚动 HTML <body> <!-- search start --> <div class="search" #if($m_ ...
- [JS前端开发] js/jquery控制页面动态加载数据 滑动滚动条自动加载事件
页面滚动动态加载数据,页面下拉自动加载内容 相信很多人都见过瀑布流图片布局,那些图片是动态加载出来的,效果很好,对服务器的压力相对来说也小了很多 有手机的相信都见过这样的效果:进入qq空间,向下拉动空 ...
- Ajax动态滚动加载数据
看新浪微博,人人网都有这样的效果:滚动条滚动到最下面的时候,新的数据就被自动加载出来了,今天亲自尝试了一下这个效果的实现. 最开始在CSDN上写了一版,功能比较简单,今天又增加了一个小功能:翻页到指定 ...
随机推荐
- C标准I/O建立一个文件仓库
实现了 增删改查 创建了一个结构体 保存 num name cout price 代码 #include<stdio.h>#include<string.h>#include& ...
- iOS oc和swift中协议的使用
创建一个空的工程 在工程中我们新建一个类 继承与NSObject 定义一个协议‘ @protocol UpdateAlertDelegate <NSObject> //这里的红色字体就是我 ...
- H.264转码加速：NVENC大战Quick Sync
GPU加速技术对普通消费者最直观的影响就是视频转码应用上了,NVIDIA..AMD以及Intel都有自己的加速技术,而在新一代CPU和GPU架构上,三方都有更新的技术方案.<br>< ...
- nodejs 中使用 mocha + should + jscoverage 生成 单元测试覆盖率报告
最近一直在做nodejs,而关于js的单元测试覆盖率网上资料比较少而且吧比较零散,我从网上找来一些资料整理一下分析给大家,希望大家可以少走弯路. 首先我是从windows环境下测试的,用到的工具有 m ...
- 最快让你上手ReactiveCocoa之基础篇（简称RAC）
前言 很多blog都说ReactiveCocoa好用,然后各种秀自己如何灵活运用ReactiveCocoa,但是感觉真正缺少的是一篇如何学习ReactiveCocoa的文章,小编看了很多篇都没看出怎么 ...
- C语言函数名与函数指针详解
一.通常的函数调用 一个通常的函数调用的例子: /* 自行包含头文件 */ void MyFun(int x); /* 此处的声明也可写成:void MyFun(int) */ int main(in ...
- 一个RESTful+MySQL程序
前言 本章内容适合初学者(本人也是初学者). 上一章内容(http://www.cnblogs.com/vanezkw/p/6414392.html)是在浏览器中显示Hello World,今天我们要 ...
- JS批量替换内容中关键词为超链接，避开已存在的链接和alt、title中的关键词
懂点seo的人都知道要给内容中关键词加上链接,形成站内锚文本链接,这对seo有很大的帮助. 思路就是在数据库中录入若干个关键词和关键词对应的链接,当然链接可以根据关键词的id自动生成,或者直接用关键词 ...
- Struts2系列笔记(7)---Struts2类型转换
Struts2类型转换 struts2中内置了大量的类型转换器用来完成数据类型转换的问题,这篇随笔主要通过两个方面来写Struts类型转换 1:Struts2内置的类型转换器 2:如何自定义 ...
- 【2017年新篇章】 .NET 面试题汇总（一）
开篇 本次给大家介绍的是我收集以及自己个人保存一些.NET面试题 简介 此次包含的不止是.NET知识,也包含少许前端知识以及.net面试时所涉及的种种考点,希望能给找工作的同学们哪怕一点点帮助. 古人 ...