Ajax刪除資料與查看資料操作的步奏詳解-js教程-PHP中文網

首頁

web前端

js教程

Ajax刪除資料與查看資料操作的步奏詳解

php中世界最好的语言

Apr 02, 2018 am 11:20 AM

ajax 刪除查看

這次為大家帶來Ajax刪除資料與查看資料操作的步奏詳解，Ajax刪除資料與查看資料操作的注意事項有哪些，以下就是實戰案例，一起來看一下。

1.資料庫找一張表：

#顏色表

2.主頁面

主頁面的程式碼用到tbody；

TBODY作用是：

可以控製表格分行下載，進而提升下載速度。

（網頁的開啟是先表格的內容全部下載完畢後，才顯示出來，分行下載可以先顯示部分內容，這樣會減少使用者等待時間。

使用TBODY的目的是可以使得這些包含在內的程式碼不用在整個表格都解析後一起顯示，就是說如果有多個行，那麼如果得到一個TBODY行，就可以先顯示一行。文本體，一個HTML文件，只有一個BODY，而在TABLE中可以有多個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获取字符串长度

登入後複製

寫完看下頁面：

##3.接下來就可以寫刪除了：

先在最後的一個儲存格中加入刪除按鈕，並傳一個主鍵值：

<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>

登入後複製

為刪除按鈕新增事件，並呼叫Ajax方法：

非同步與同步的差異：

##同步需要等待返回結果才能繼續，非同步不必等待，一般需要監聽異步的結果

同步是在一條直線上的隊列，非同步不在一個隊列上各走各的

"</td><td>" +
          "<input type=&#39;button&#39; ids=&#39;"+lie[0]+"&#39; class=&#39;sc&#39; value=&#39;删除&#39; />" +
          //ids里面存上主键值
          "</td></tr>";

登入後複製

回呼函數等等回來寫入；

繼續刪除處理頁面：

 //给删除按钮加上事件
      $(".sc").click(function(){
        var ids = $(this).attr("ids");
        $.ajax({
          url:"shanchu.php",
          data:{ids:ids},
          dataType:"TEXT",
          type:"POST",
          success:function (d) {
            
          }
        });
      })

登入後複製

這樣來看：

##點選刪除，刪掉以後不重新整理頁面，

若是让他自动加载数据，需要把加载数据的代码封装成一个方法，删除的时候调用此方法；就哦可了

主页面代码：

<!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=&#39;button&#39; ids=&#39;" + lie[0] + "&#39; class=&#39;sc&#39; value=&#39;删除&#39; />" +
            //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=&#39;{$ids}&#39;";
if($db ->Query($sql,0))
{
  echo "ok";
}
else{
  echo "no";
}

登入後複製

相信看了本文案例你已经掌握了方法，更多精彩请关注php中文网其它相关文章！

熱AI工具

熱工具

熱門話題

gmail信箱登陸入口在哪裡

7716

Java教學

1641

CakePHP 教程

1396

Laravel 教程

1289

PHP教程

1232

Related knowledge

微信拉黑再刪除永久加不上是真的嗎 Apr 08, 2024 am 11:41 AM

1.首先，拉黑再刪除永久加不上是假的，拉黑刪除後想要再加對方，只要對方同意即可。 2.如果用戶將某人封鎖，對方將無法向用戶發送訊息、查看用戶的朋友圈、與用戶通話。 3.封鎖並不意味著將對方從用戶的微信聯絡人清單中刪除。 4.如果用戶在封鎖後又將對方從用戶的微信聯絡人清單中刪除，那麼在刪除後是沒有辦法恢復的。 5.如果用戶想再加入對方為好友，需要對方同意並重新新增使用者。

抖音查看刪除登入裝置的操作步驟 Mar 26, 2024 am 09:01 AM

1.先點選開啟抖音app，點選【我】。 2.點選右上方三點的圖示。 3.點選進入【設定】。 4.點選開啟【帳號與安全】。 5.選擇點選【登入設備管理】。 6.最後點選選擇其中的設備，點選【移除】即可。

小紅書把別人評論刪了怎麼找回來？把別人留言刪了會有顯示嗎？ Mar 21, 2024 pm 10:46 PM

小紅書作為一款熱門的社群電商平台，用戶之間的互動評論是平台中不可或缺的溝通方式。有時候，我們可能會發現自己的評論被其他人刪除，這種情況可能會讓我們感到困惑。一、小紅書把別人評論刪了怎麼找回來？當發現自己的評論被刪除時，首先可以嘗試在平台上直接搜尋相關的貼文或商品，查看是否還能找到該評論。如果評論被刪除後仍然顯示，那麼可能是被原帖主刪除的，這時候可以嘗試聯絡原帖主，詢問其刪除評論的原因，並要求恢復評論。如果評論已經被完全刪除且無法在原始貼文上找到，那麼在平台上恢復評論的機會相對較小。可以嘗試使用其他途徑

抖音聊天記錄怎麼徹底消除乾淨 May 07, 2024 am 11:14 AM

1.開啟抖音app，點選介面底部的【訊息】，點選需要刪除的聊天對話入口。 2.長按任一聊天記錄，點選【多選】，勾選想要刪除的聊天記錄。 3.點選右下角的【刪除】按鈕，在彈出的視窗中選擇【確認刪除】即可將這些記錄永久刪除。

抖音如何發給別人文件？上發給別人文件怎麼刪除？ Mar 22, 2024 am 08:30 AM

在抖音上，使用者不僅可以分享自己的生活點滴和才藝，還可以和其他使用者互動交流。在這個過程中，有時候我們需要向其他用戶發送文件，例如圖片、影片等。那麼，在抖音上如何發給別人文件呢？一、抖音上如何發給別人文件？ 1.開啟抖音，進入你想要傳送檔案的聊天介面。 2.點選聊天介面中的「+」號，選擇「檔案」。 3.在檔案選項中，你可以選擇傳送圖片、影片、音訊等檔案。選擇你想要發送的文件後，點擊「發送」。 4.等待對方接受你的文件，一旦對方接受，文件就會傳輸成功。二、抖音上發給別人檔案怎麼刪除？ 1.打開抖音，進入你發送文

網易雲音樂在哪裡查看音樂排行榜_網易雲音樂查看音樂排行榜方法 Mar 25, 2024 am 11:40 AM

1.打開手機後，選擇網路易雲音樂。 2.進入首頁後，大家就可以看到【排行榜】，點選進入。 3.在排行榜中，可以選擇任意榜單，點選【新歌榜】。 4、選擇自己喜歡的歌曲，並進行點擊。 5.返回上一頁，可以看到更多的榜單。

PHP實用技巧：刪除程式碼中的最後一個分號 Mar 27, 2024 pm 02:24 PM

PHP實用技巧：刪除程式碼中的最後一個分號在寫PHP程式碼時，常常會遇到需要刪除程式碼中最後一個分號的情況。這可能是因為複製貼上引入了多餘的分號，或是為了優化程式碼風格和結構。在本文中，我們將介紹一些方法來刪除PHP程式碼中的最後一個分號，並且提供具體的程式碼範例。方法一：使用substr函數substr函數可以從字串中傳回指定長度的子字串。我們可以

閒魚怎麼查看自己的id_閒魚個人暱稱查看方法介紹 Mar 22, 2024 am 08:21 AM

閒魚作為交易平台，使用前都需要先註冊和登入自己的帳號，用戶可以為自己的帳號設定id名稱，如果想查看自己的id是什麼怎麼辦呢？下面就來一起了解吧！閒魚個人暱稱檢視方法介紹先啟動閒魚應用，進入首頁後，透過切換到賣閒置、訊息、我的頁面，點選右下角的【我的】選項。 2、然後在我的頁面中我們需要點擊左上角的【頭像】；2、接著來到個人主頁的頁面中可以看到不同的信息，我們需要在這裡點擊【編輯資料】按鈕；4、最後點擊過後在編輯資料的頁面中我們就可以看到了；

See all articles

Ajax刪除資料與查看資料操作的步奏詳解

熱AI工具

Undresser.AI Undress

AI Clothes Remover

Undress AI Tool

Clothoff.io

Video Face Swap

熱門文章

熱工具

記事本++7.3.1

SublimeText3漢化版

禪工作室 13.0.1

Dreamweaver CS6

SublimeText3 Mac版

熱門話題