1.數(shù)據(jù)庫找一張表：
顏色表
2.主頁面
主頁面的代碼用到tbody；
TBODY作用是：
可以控制表格分行下載，從而提高下載速度。
（網(wǎng)頁的打開是先表格的的內(nèi)容全部下載完畢后，才顯示出來，分行下載可以先顯示部分內(nèi)容，這樣會減少用戶等待時間。
使用TBODY的目的是可以使得這些包含在內(nèi)的代碼不用在整個表格都解析后一起顯示，就是說如果有多個行，那么如果得到一個TBODY行，就可以先顯示一行。
BODY是HTML的文本體，一個HTML文件，只有一個BODY，而在TABLE中可以有多個TBODY。
TBODY這個標(biāo)簽可以控制表格分行下載，當(dāng)表格內(nèi)容很大時比較實(shí)用，在需要分行下載處加上和，
比如：
以下為引用的內(nèi)容：head1head2首先顯示首先顯示再顯示再顯示foot1foot2
注意：
*1.TBODY元素在瀏覽器中不會被渲染表示
*2.當(dāng)不同行間的單元間合并時各單元格所在的行不要加TBODY標(biāo)簽
提示：TBODY元素內(nèi)包含的有效標(biāo)簽有：TD、TH、TR 特別提示 本例代碼的運(yùn)行將看不到效果，因?yàn)楸砀裰械膬?nèi)容比較少，
只有在數(shù)據(jù)量大而且表格嵌套較多時才看得到效果。
主頁面代碼：
!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>無標(biāo)題文檔/title>
script src="jquery-1.11.2.min.js">/script>
/head>
body>
h1>顯示數(shù)據(jù)/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",
// 顯示所有的數(shù)據(jù)不用寫data
dataType:"TEXT",
success:function(data)
{
}
});
/script>
圖：
回調(diào)函數(shù)里面是空的，等會回來寫；
接著是加載頁面：
顯示：遍歷數(shù)組，顯示出表的內(nèi)容，具體：
?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-藍(lán),用|分割，拼出來是1-紅|2-藍(lán)|
}
echo $str;
來看一下輸出的是什么：
在最后面多了一條豎線，去豎線：
$str = substr($str,0,strlen($str)-1);
//截取字符串：從第0個開始，截取它的長度-1
//strlen獲取字符串長度
再來看：
現(xiàn)在來寫回調(diào)函數(shù)：
script>
$.ajax({
url:"jiazai.php",
// 顯示所有的數(shù)據(jù)不用寫data
dataType:"TEXT",
success:function(data)
{
var str = "";
var hang = data.split("|");
//split拆分字符串
for(var i = 0;ihang.length;i++)
{
//通過循環(huán)取到每一行;拆分出列；
var lie = hang[i].split("-");
str = str+
"tr>td>"
+lie[0]+
"/td>td>"
+lie[1]+
"/td>td>操作/td>/tr>";
}
$("#td").html(str);
//找到td把html代碼扔進(jìn)去
}
});
/script>
寫完看下頁面：
3.接下來就可以寫刪除了：
先在在最后的一個單元格中添加刪除按鈕，并傳一個主鍵值：
"/td>td>" +
"input type='button' ids='"+lie[0]+"' class='sc' value='刪除' />" +
//ids里面存上主鍵值
"/td>/tr>";
給刪除按鈕添加事件，并調(diào)用Ajax方法：
**
異步與同步的區(qū)別：
同步需要等待返回結(jié)果才能繼續(xù)，異步不必等待，一般需要監(jiān)聽異步的結(jié)果
同步是在一條直線上的隊(duì)列，異步不在一個隊(duì)列上 各走各的
**
//給刪除按鈕加上事件
$(".sc").click(function(){
var ids = $(this).attr("ids");
$.ajax({
url:"shanchu.php",
data:{ids:ids},
dataType:"TEXT",
type:"POST",
success:function (d) {
}
});
})
回調(diào)函數(shù)等等回來寫；
繼續(xù)刪除處理頁面：
?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";
}
這樣來看：
點(diǎn)擊刪除，刪掉以后不刷新頁面，
若是讓他自動加載數(shù)據(jù)，需要把加載數(shù)據(jù)的代碼封裝成一個方法，刪除的時候調(diào)用此方法；就哦可了
主頁面代碼：
!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>無標(biāo)題文檔/title>
script src="jquery-1.11.2.min.js">/script>
/head>
body>
h1>顯示數(shù)據(jù)/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>
//調(diào)用load方法
load();
//把加載數(shù)據(jù)封裝成一個方法
function load()
{
$.ajax({
url: "jiazai.php",
// 顯示所有的數(shù)據(jù)不用寫data
dataType: "TEXT",
success: function (data) {
var str = "";
var hang = data.split("|");
//split拆分字符串
for (var i = 0; i hang.length; i++) {
//通過循環(huán)取到每一行;拆分出列；
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代碼扔進(jìn)去
//給刪除按鈕加上事件
$(".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("刪除成功");
//調(diào)用加載數(shù)據(jù)的方法
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刪除數(shù)據(jù)與查看數(shù)據(jù)操作，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復(fù)大家的。在此也非常感謝大家對腳本之家網(wǎng)站的支持！
您可能感興趣的文章:- 基于php(Thinkphp)+jquery 實(shí)現(xiàn)ajax多選反選不選刪除數(shù)據(jù)功能
- Ajax遍歷jSon后對每一條數(shù)據(jù)進(jìn)行相應(yīng)的修改和刪除(代碼分享)
- Ajax方式刪除表格一行數(shù)據(jù)示例代碼
- Ajax添加數(shù)據(jù)與刪除篇實(shí)現(xiàn)代碼
- PHP+ajax 無刷新刪除數(shù)據(jù)
