ajax怎么實(shí)現(xiàn)數(shù)據(jù)刪除、查看詳情功能

這篇文章主要介紹了ajax怎么實(shí)現(xiàn)數(shù)據(jù)刪除、查看詳情功能，具有一定借鑒價(jià)值，感興趣的朋友可以參考下，希望大家閱讀完這篇文章之后大有收獲，下面讓小編帶著大家一起了解一下。

為濱江等地區(qū)用戶提供了全套網(wǎng)頁(yè)設(shè)計(jì)制作服務(wù)，及濱江網(wǎng)站建設(shè)行業(yè)解決方案。主營(yíng)業(yè)務(wù)為成都網(wǎng)站設(shè)計(jì)、做網(wǎng)站、濱江網(wǎng)站設(shè)計(jì)，以傳統(tǒng)方式定制建設(shè)網(wǎng)站，并提供域名空間備案等一條龍服務(wù)，秉承以專業(yè)、用心的態(tài)度為用戶提供真誠(chéng)的服務(wù)。我們深信只要達(dá)到每一位用戶的要求，就會(huì)得到認(rèn)可，從而選擇與我們長(zhǎng)期合作。這樣，我們也可以走得更遠(yuǎn)！

運(yùn)用bootstrap,jquery和ajax顯示一些數(shù)據(jù)，附加刪除功能并且點(diǎn)擊能彈出模態(tài)框詳情功能

主頁(yè)面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>無(wú)標(biāo)題文檔</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>
<div class="page-header">
 <h2>顯示數(shù)據(jù)
 </h2>
</div>
<table class="table table-hover">
 <thead>
 <tr>
 <th width="30%">代號(hào)</th>
 <th width="30%">名稱</th>
 <th width="40%">操作</th>
 </tr>
 </thead>
 <tbody id="tb">
 //用js向其中添加內(nèi)容
 </tbody>
</table>
<!-- 模態(tài)框（Modal） -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
 <div class="modal-dialog">
 <div class="modal-content">
  <div class="modal-header">
  <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
  <h5 class="modal-title" id="myModalLabel">詳細(xì)信息</h5>
  </div>
  <div class="modal-body" id="nr">

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

  <button type="button" class="btn btn-default" data-dismiss="modal">關(guān)閉</button>

  </div>
 </div><!-- /.modal-content -->
 </div><!-- /.modal -->
</div>
</body>
<script type="text/javascript">
//加載數(shù)據(jù)
Load();
//加載數(shù)據(jù)的方法
function Load()
{
$.ajax({
 url:"jiazai.php",
 dataType:"TEXT",
 success: function(data){
  var str = "";
  var hang = data.split("|"); //根據(jù)字符串中的|分解
  for(var i=0;i<hang.length;i++)
  {
   var lie = hang[i].split("^"); //根據(jù)字符串中的^分解
   str = str+"<tr><td>"+lie[0]+"</td><td>"+lie[1]+"</td><td><button type='button' class='btn btn-info btn-sm sc' code='"+lie[0]+"'>刪除</button><button type='button' class='btn btn-primary btn-sm xq' code='"+lie[0]+"'>查看</button></td></tr>";
  }
  $("#tb").html(str); //向tbody中輸出內(nèi)容
  addshanchu();
  addxiangqing();
  }
 });
}
//給刪除按鈕加事件的方法
function addshanchu()
{
//刪除事件
  $(".sc").click(function(){
   var code = $(this).attr("code"); //獲取刪除按鈕所在的數(shù)據(jù)的code
   $.ajax({
   url:"shanchu.php",
   data:{code:code},
   dataType:"TEXT",
   type:"POST",
   success: function(d){
    if(d.trim()=="OK")
    {
    alert("刪除成功");
    Load(); //刪除完需要加載數(shù)據(jù)
    }
    else
    {
    alert("刪除失敗");
    }
   }
   });
   })
}
//給查看詳情加事件的方法
function addxiangqing()
{
 $(".xq").click(function(){
 //顯示模態(tài)框
 $('#myModal').modal('show');
 //在模態(tài)框里面顯示內(nèi)容
 var code = $(this).attr("code"); //獲取哪一條數(shù)據(jù)
 $.ajax({
  url:"xiangqing.php",
  data:{code:code},
  dataType:"TEXT",
  type:"POST",
  success:function(data){
  var lie = data.split("^"); 
  var str = "<div>民族代號(hào)："+lie[0]+"</div><div>民族名稱："+lie[1]+"</div>";
  $("#nr").html(str);
  }
 });
 })
}
</script>
</html>

加載數(shù)據(jù)的頁(yè)面jiazai.php

<?php
include("../FENGZHUANG/DBDA.class.php");
$db = new DBDA();
$sql = "select * from nation order by code ASC";
$arr = $db->Query($sql);
// 下面實(shí)現(xiàn)的字符串是類似這樣的n001^漢族|n002^回族|n003^苗族
$str = "";返回主頁(yè)面的數(shù)據(jù)是TEXT型，得轉(zhuǎn)換一下
foreach($arr as $v)
{
 $str = $str.implode("^",$v)."|"; //拼接字符串
}
$str = substr($str,0,strlen($str)-1); //去掉末尾的|字符。
echo $str;

刪除處理頁(yè)面shanchu.php

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

查看詳情頁(yè)面xiangqing.php

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

什么是ajax

ajax是一種在無(wú)需重新加載整個(gè)網(wǎng)頁(yè)的情況下，能夠更新部分網(wǎng)頁(yè)的技術(shù)，可以通過(guò)在后臺(tái)與服務(wù)器進(jìn)行少量數(shù)據(jù)交換，使網(wǎng)頁(yè)實(shí)現(xiàn)異步更新。

感謝你能夠認(rèn)真閱讀完這篇文章，希望小編分享的“ajax怎么實(shí)現(xiàn)數(shù)據(jù)刪除、查看詳情功能”這篇文章對(duì)大家有幫助，同時(shí)也希望大家多多支持創(chuàng)新互聯(lián)，關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道，更多相關(guān)知識(shí)等著你來(lái)學(xué)習(xí)!

網(wǎng)頁(yè)名稱：ajax怎么實(shí)現(xiàn)數(shù)據(jù)刪除、查看詳情功能
本文URL：http://muchs.cn/article14/iiosge.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供響應(yīng)式網(wǎng)站、虛擬主機(jī)、云服務(wù)器、用戶體驗(yàn)、移動(dòng)網(wǎng)站建設(shè)、軟件開發(fā)

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來(lái)源：創(chuàng)新互聯(lián)

猜你還喜歡下面的內(nèi)容

ajax怎么實(shí)現(xiàn)數(shù)據(jù)刪除、查看詳情功能

什么是ajax

ajax怎么實(shí)現(xiàn)數(shù)據(jù)刪除、查看詳情功能