Ajax添加數據與刪除篇實現代碼
2024-09-01 08:29:18
供稿：網友
如果你真的把前幾篇掌握了．實現ajax刪除功能會易如反常．我所要教你的是．靈活利用JavaScript和Dom來實現一個酷酷的刪除效果．其實你學習到這里．已經能夠明白，在ajax技術中那些被請求的 服務端網頁，在非ajax應用中并無太大區別．無非也是接受前端發過來的請求．在后臺執行一些操作而已！學習完這篇教程以后．你會明白想要實現夠炫夠酷的的ajax效果．你必須要熟練掌握JavaScript Dom 這些技術精通．
剛剛我喝多了，上面的這段話是我在兩天前就寫好的．我本來想直接睡覺的．但我想試試．是不是在我喝酒之后，我能夠講的更好．
其實我覺得在我酒醉迷離的時候更能很好的將我的知識傳授與你．今天的添加效果與前一篇的添加數據一樣．但今天的刪除效果或許是你從未看到過的．想要刪除那條數據．請單擊他．然后點擊刪除按扭．這跟桌面應用程序并無二樣．ajax就是這樣的神奇．不然 他不會被全世界的Web開發人員所追求！還是先看實例吧．你會為此而感到驚訝的！
代碼如下:
<html>
<head>
<title>ajax無刷新添加與刪除數據</title>
<style>
body{
font-size:12px;
}
table{
border-collapse:collapse;
}
</style>
</head>
<body>
為顯示更流暢，我們只讀取數據庫內最新的10條數據．由于在線測試人數多．都在操作一個數據庫．可能會出現并發情況！
<hr/>
輸入內容：<input id="str" type="input" /> <input type="button" value="確定添加" onclick="add_Post()"/>
<span id="msg" style="color:red"></span>
<table border="1"><!--該表格用來顯示數據內容-->
<tbody id="a"></tbody>
</table>
<span style="color:red">操作提示：請用鼠標單擊你想要刪除的數據．然后點擊刪除按扭！</span>
<input id="hid_id" type="hidden" />
<input type="button" value="刪除數據" onclick="del_Data()" />
<script type="text/javascript">
function ajax_xmlhttp(){
//在IE中創建xmlhttpRequest,適用于IE5.0以上所有版本
var msXmlhttp = new Array("Msxml2.XMLHTTP.5.0","Msxml2.XMLHTTP.4.0","Msxml2.XMLHTTP.3.0","Msxml2.XMLHTTP","Microsoft.XMLHTTP");
for(var i=0; i<msXmlhttp.length; i++){
try
{
_xmlhttp=new ActiveXObject(msXmlhttp[i]);
}
catch(e)
{
_xmlhttp=null;
}
} //循環創建基于IE瀏覽器的xmlhttp.結束
//如果非IE瀏覽器，則創建基于FireFox等瀏覽器的xmlhttpRequest
if(!_xmlhttp && typeof XMLHttpRequest != "undefined")
{
_xmlhttp=new XMLHttpRequest();
}
return _xmlhttp;
}
//讀取數據函數
function Read(){
var ajax = ajax_xmlhttp(); //將xmlhttprequest對象賦值給一個變量．
ajax.open("post","Add_Del_Data.asp?action=read",true);//設置請求方式，請求的網頁，url的action參數為read，異步請求
