利用Ajax對客戶端頁面的動態增刪改查
前兩天在做一個網站的後臺,我做成員管理一塊,發現我負責的這一塊有很大的發揮空間,在web2.0時代客戶的體驗已經被提為最重要的議程,因此網頁的流暢度將是網頁能夠給人帶來快捷體驗的一個有效途徑,利用Ajax實現對資料的增刪改查,效果很好....
在客戶端指令碼在winload時間新增函式初始化xmlHTTP:
function ajaxFunction()
{
try
{
// Firefox, Opera 8.0+, Safari
xmlHttp=new XMLHttpRequest();
}
catch (e)
{
// Internet Explorer
try
{
xmlHttp=new ActiveXObject("Msxml2.XMLHTTP");
}
catch (e)
{
try
{
xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");
}
catch (e)
{
alert("您的瀏覽器不支援AJAX！");
return false;
}
}
}
xmlHttp.onreadystatechange=function(){
if(xmlHttp.readyState==4)
{
back_check();
}
}
}
這樣就可以保證在每次使用xmlHTTP時都有物件可用(就是這個意思~~~可能有點亂)然後在每次使用完xmlHTTP之後都呼叫一次Ajaxfunction就可以了呵呵.
在表格控制方面,利用dom物件對錶格的處理.在單擊修改按鈕時,呼叫一下函式,並彈出隱藏的層,將資料載入到層中:
function info_update_input(index,id)
{
state=0;
//彈出隱藏的層
document.getElementById("middle").style.display="block";
document.getElementById("info_add").style.display="block";
document.getElementById("info_add").style.left="30";
document.getElementById("info_add").style.top="50";
document.getElementById("hidden").value=id;//使資料的id新增到層的隱藏域中,以便以後使用...
for(var i=0;i<=3;i++)//將表格中的資料載入到層中
{
document.getElementById("input_"+i).value=document.getElementById("tb_"+id).cells[i+1].innerHTML;
}
}
單擊層中的確定按鈕後一下函式被呼叫,資料被返回到伺服器,對資料進行修改:
function info_add_post(index,id)
{
if(state==0)
{
alert(state);
index=2;
id=document.getElementById("hidden").value;
}
var str="test.php?index="+index+"&id="+id;
for(var i=0;i<=3;i++)
{
str+="&d_"+i+"="+document.getElementById("input_"+i).value;
info[i]=document.getElementById("input_"+i).value;
}
alert(str);
xmlHttp.open("GET",str);
xmlHttp.send(null);
}
function end_add()
{
document.getElementById("middle").style.display="none";
document.getElementById("info_add").style.display="none";
document.getElementById("mem_manager").insertRow(document.getElementById("mem_manager").rows.length).innerHTML="<td>hang</td>";
}
伺服器處理完後,返回處理的id值(由於這是我的原始碼扒下來的呵呵,所以還有操作索引值.index,以確定是增刪改查的那一項)
function back_check()
{
var reStr=xmlHttp.responseText;
//document.write(reStr);
var index=reStr.charAt(0);
alert(reStr);
if(index=="1")
{
document.getElementById("mem_manager").deleteRow(document.getElementById("tb_"+document.getElementById("hidden").value).rowIndex);
}
else if(index=="2")
{
info_update();
//alert(document.getElementById("tb_"+reStr.charAt(2)).cells[0].innerHTML);
}
else if(index=="3")
{
end_add();
}
ajaxFunction();
}
function info_update()
{
document.getElementById("middle").style.display="none";
document.getElementById("info_add").style.display="none";
document.getElementById("mem_manager").deleteRow(document.getElementById("tb_"+document.getElementById("hidden").value).rowIndex);
//document.getElementById("mem_manager").rows[2].innerHTML="sdfsdfsdfsdf";
//alert(document.getElementById("mem_manager").rows[2].innerHTML);
var new_row=document.getElementById("mem_manager").insertRow(document.getElementById("mem_manager").rows.length-1);
//new_row.style.height="10px";
//new_row.innerHTML="<td><input type='text' size=5 maxlength=5 /></td>";
new_row.id="tb_"+document.getElementById("hidden").value;
new_row.style.backgroundColor="#D7EBFF";
new_row.insertCell(0).innerHTML="<input type='checkbox'/>";
for(var i=1;i<5;i++)
{
new_row.insertCell(i).innerHTML=info[i-1];
}
new_row.insertCell(5).innerHTML="<input type=/"button/" value=/"刪除/" onclick=/"info_check(1,"+document.getElementById("hidden").value+")/"/>";
new_row.insertCell(6).innerHTML="<a href='#' onclick=/"info_update_input(2,"+document.getElementById("hidden").value+")/">修改</a>";
//new_row.innerHTML="<td>df</td>";
}
這樣整個修改過程就算結束啦,由於是我臨時寫的,而且我水平並不高,所以程式碼看著有點亂,希望能對用的找的朋友一些啟發.想要原始碼可以留言我發給你呵呵~~~