ajax中網頁傳輸（一）TEXT——帶有刪除功能的資料庫表格顯示練習

最後更新：2016-05-19 來源：互聯網

上載者：User

創建阿里雲帳戶，並獲得超過 40 款產品的免費試用版；而企業帳戶則可以享有總值 $1200 的免費試用版。立即註冊！

標籤：

網頁之間傳輸的三種方式：TEXT、JSON、XML。

本章將講解帶有TEXT形勢的ajax網頁傳輸

第一：body部分代碼

<title>ajax中TEXT講解並且帶有刪除功能的表格</title><script src="jquery-2.0.0.min.js"></script><style type="text/css">.sc{width:70px;height:30px;background-color:#3FF;color:#F00;text-align:center;line-height:30px;vertical-align:middle;font-size:20px;}.sc:hover{cursor:pointer;background-color:#096;}</style></head><body><input type="button" value="顯示資料" id="btn"/><table id="xianshi" width="100%" border="1" cellpadding="0" cellspacing="0"></table></body>

第二：點擊“顯示資料”需要用到的chuli.php代碼

<?php include("DBDA.class.php"); $db=new DBDA();  $sql="select * from info";  //自己寫語句 /*$attr=$db->Query($sql);  $str=""; foreach($attr as $v) { $str=$str.implode("^",$v); $str=$str."|"; }  $str=substr($str,0,strlen($str)-1); //截取最後的“|”*/  //調用封裝類裡面的函數 $re=$db->StrQuery($sql);  echo $re;

AJAX調用返回字串所引用的StrQuery()函數

//AJAX調用返回字串    function StrQuery($sql,$type=0,$ku="mydb"){$db=new MySQLi($this->host,$this->uid,$this->pwd,$ku);!mysqli_connect_error() or die ("串連失敗");$result=$db->query($sql);//當為查詢語句時if($type==0){$attr=$result->fetch_all();$str="";for($i=0;$i<count($attr);$i++){for($j=0;$j<count($attr[$i]);$j++){$str=$str.$attr[$i][$j];$str=$str."^";}$str=substr($str,0,strlen($str)-1);$str=$str."|";}$str=substr($str,0,strlen($str)-1);return $str;}//增刪改語句else{if($result){return "OK";}else{return "NO";}}}

第三：JScript中啟動並執行“顯示資料”用到的js代碼函數

function Showall() { $.ajax({  async:false, url:"chuli02.php", dataType:"TEXT", success: function(data){  var str="<tr align=‘center‘><td>代號</td><td>姓名</td><td>性別</td><td>民族</td><td>生日</td><td>操作</td><tr>";  var hang=data.split("|");  //以“|”截取  for(var i=0;i<hang.length;i++){  var lie=hang[i].split("^");  //str+="<tr align=‘center‘><td>"+lie[0]+"</td><td>"+lie[1]+"</td><td>"+lie[2]+"</td><td>"+lie[3]+"</td><td>"+lie[4]+"</td><td><div class=‘sc‘ bs=‘"+lie[0]+"‘>刪除</div></td></tr>";  str+="<tr align=‘center‘>";for(var j=0;j<lie.length;j++){str+="<td>"+lie[j]+"</td>";}str+="<td><div class=‘sc‘ bs=‘"+lie[0]+"‘>刪除</div></td>";str+="</tr>";   }    $("#xianshi").html(str); } })

第四：表格中點擊“刪除”後台啟動並執行代碼delete.php

<?php$code=$_POST["code"];include("DBDA.class.php");$db=new DBDA();$sql="delete from info where code=‘{$code}‘";$r=$db->Query($sql,1);  //1代表增刪改，預設0代表查詢if($r){echo "OK";}else{    echo "NO";}

第五：JScript中“刪除”用到的js函數代碼

 function BindCK(){  $(".sc").click(function(){  var code=$(this).attr("bs");  $.ajax({  url:"delete03.php", data:{code:code}, type:"POST", dataType:"TEXT", success:function(data){  if(data=="OK"){  Showall(); BindCK();  } else{  alert("刪除失敗！"); }  } })  })  }

第六：JScript中兩個函數代碼整合在一起的調用的代碼

     $("#btn").click(function(){ Showall();BindCK();  })

ajax中網頁傳輸（一）TEXT——帶有刪除功能的資料庫表格顯示練習

本文章原先以中文撰寫並發佈於 aliyun.com，亦設英文版本，僅作資訊用途。本網站不對文章的準確性，完整性或可靠性或其任何翻譯作出任何明示或暗示的陳述或保證。如對該文章有任何疑慮或投訴，請傳送電郵至 info-contact@alibabacloud.com 並提供相關疑慮或投訴的詳細說明。職員會於 5 個工作天內與您聯絡，一經驗證之後，即會刪除該侵權內容。

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

Get Started for Free

Sales Support

1 on 1 presale consultation

Chat Contact Sales
After-Sales Support

24/7 Technical Support 6 Free Tickets per Quarter Faster Response

Open a Ticket
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.

Learn More