ajax實現資料刪除、查看詳情功能-js教程-PHP中文網

首頁

web前端

js教程

ajax實現資料刪除、查看詳情功能

韦小宝

Jan 01, 2018 pm 06:26 PM

ajax 刪除查看

本文主要介紹了ajax實現資料刪除、查看詳情功能，具有很好的參考和學習ajax的價值。下面跟著小編一起來看下ajax實現數據刪除、查看詳情功能這篇文章吧

運用bootstrap,jquery和ajax顯示一些數據，附加刪除功能並且點擊能彈出模態框詳情功能

主頁main.php

<!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>
<link type="text/css" href="../FENGZHUANG/bootstrap/css/bootstrap.min.css" rel="external nofollow" rel="stylesheet" /> //引入bootstrap的css文件
<script src="../FENGZHUANG/jquery-3.1.1.min.js"></script> //先引入jquery的js文件
<script src="../FENGZHUANG/bootstrap/js/bootstrap.min.js"></script> //再引入其它的js文件
<style type="text/css">
.xq{ margin-left:30px}
</style>
</head>
<body>
<p class="page-header">
 <h1>显示数据
 </h1>
</p>
<table class="table table-hover">
 <thead>
 <tr>
 <th width="30%">代号</th>
 <th width="30%">名称</th>
 <th width="40%">操作</th>
 </tr>
 </thead>
 <tbody id="tb">
 //用js向其中添加内容
 </tbody>
</table>
<!-- 模态框（Modal） -->
<p class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
 <p class="modal-dialog">
 <p class="modal-content">
  <p class="modal-header">
  <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
  <h4 class="modal-title" id="myModalLabel">详细信息</h4>
  </p>
  <p class="modal-body" id="nr">

  </p>
  <p class="modal-footer">

  <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>

  </p>
 </p><!-- /.modal-content -->
 </p><!-- /.modal -->
</p>
</body>
<script type="text/javascript">
//加载数据
Load();
//加载数据的方法
function Load()
{
$.ajax({
 url:"jiazai.php",
 dataType:"TEXT",
 success: function(data){
  var str = "";
  var hang = data.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><button type=&#39;button&#39; class=&#39;btn btn-info btn-sm sc&#39; code=&#39;"+lie[0]+"&#39;>删除</button><button type=&#39;button&#39; class=&#39;btn btn-primary btn-sm xq&#39; code=&#39;"+lie[0]+"&#39;>查看</button></td></tr>";
  }
  $("#tb").html(str); //向tbody中输出内容
  addshanchu();
  addxiangqing();
  }
 });
}
//给删除按钮加事件的方法
function addshanchu()
{
//删除事件
  $(".sc").click(function(){
   var code = $(this).attr("code"); //获取删除按钮所在的数据的code
   $.ajax({
   url:"shanchu.php",
   data:{code:code},
   dataType:"TEXT",
   type:"POST",
   success: function(d){
    if(d.trim()=="OK")
    {
    alert("删除成功");
    Load(); //删除完需要加载数据
    }
    else
    {
    alert("删除失败");
    }
   }
   });
   })
}
//给查看详情加事件的方法
function addxiangqing()
{
 $(".xq").click(function(){
 //显示模态框
 $(&#39;#myModal&#39;).modal(&#39;show&#39;);
 //在模态框里面显示内容
 var code = $(this).attr("code"); //获取哪一条数据
 $.ajax({
  url:"xiangqing.php",
  data:{code:code},
  dataType:"TEXT",
  type:"POST",
  success:function(data){
  var lie = data.split("^"); 
  var str = "<p>民族代号："+lie[0]+"</p><p>民族名称："+lie[1]+"</p>";
  $("#nr").html(str);
  }
 });
 })
}
</script>
</html>

登入後複製

載入資料的頁面jiazai.php

<?php
include("../FENGZHUANG/DBDA.class.php");
$db = new DBDA();
$sql = "select * from nation order by code ASC";
$arr = $db->Query($sql);
// 下面实现的字符串是类似这样的n001^汉族|n002^回族|n003^苗族
$str = "";返回主页面的数据是TEXT型，得转换一下
foreach($arr as $v)
{
 $str = $str.implode("^",$v)."|"; //拼接字符串
}
$str = substr($str,0,strlen($str)-1); //去掉末尾的|字符。
echo $str;

登入後複製

刪除處理頁面shanchu.php

<?php
include("../FENGZHUANG/DBDA.class.php");
$db = new DBDA();
$code = $_POST["code"];
$sql = "delete from nation where code=&#39;{$code}&#39;";
if($db->Query($sql,0))
{
 echo "OK";
}
else
{
 echo "NO";
}

登入後複製

查看詳情頁面xiangqing.php

<?php
$code = $_POST["code"];
include("../fengzhuang/DBDA.class.php");
$db = new DBDA();
$sql = "select * from nation where code=&#39;{$code}&#39;";
echo $db->StrQuery($sql);

登入後複製

以上就是這篇文章的所有內容了，希望對大家學習所有幫助！！

熱AI工具

熱工具

熱門話題

gmail信箱登陸入口在哪裡

7493

CakePHP 教程

1377

steam的賬戶名稱是什麼格式

win11激活密鑰永久

NYT連接提示和答案

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.最後點選選擇其中的設備，點選【移除】即可。

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

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

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

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

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

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

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

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

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

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