利用js調用后臺php進行數據處理原碼
該方法已經屬於過時方法，其中關鍵的地方也從論壇上得來的，我只是把它消化吸收后重新寫了更全面的出來。公布出來只是希望更多的新手能從中學到一些東西。如果你對該代碼有任何意見可以留言，但請勿進行人身攻擊，我是一個菜鳥只能寫出這樣的東西，每個老鳥都有這樣的過程。
鑒于時間問題，代碼的提交部分使用的是傳統的表單POST，如果您喜歡可以根據LOAD過程自行加上相應的SCRIPT,不過好像只能用GET了。聽說XML可以實現真正的無刷新，如果誰手上有希望能借來看看。
在此感謝QQ群組中藍劍雪狐和shelly水在JS上給予的幫助，也新手們能把自己寫的功能代碼貼出來大家一起來學習研究。
最後附上演示地址：http://lfox0002.dns0755.net/text_input.php 請喜歡HACK他人機器的朋友們手下留情，附上演示是為了讓朋友們能更快了解代碼。
input.php[HTML] 接受用戶輸入數據。
PHP代碼:----------------------------------------------
<?php/* 申;;;;;明 ------------------------------ 該演示文件詳細描述了利用JS+PHP對數據庫進行類似無刷新讀出寫入的方法 2004年02月14日 By L.Fox */
header('Cache-Control: no-store, no-cache,must-revalidate');//這兩行可以取消，把文件存成HTMLecho $_POST['name1']//我是為了?#123;試方便才加的。?><html><head><meta http-equiv='Content-Type' content='text/html; charset=??????'><title>根據編號從MYSQL提取數據進行編輯并回存[演示]</title><script language='JavaScript' id='LoadDataSrc'></script><style>body { font-family: 'Verdana', 'Arial', 'Helvetica', 'sans-serif'; font-size: 12px; line-height: 17px; scrollbar-base-color: #BBBBBB; scrollbar-shadow-color: #BBBBBB; scrollbar-highlight-color: #FFFFFF; scrollbar-3dlight-color: #000000; scrollbar-darkshadow-color: #000000; scrollbar-arrow-color: #FFFFFF;}table { border: 0; font-size: 12px; cursor: default;}td { text-align: left; height: 20;}input { width: 100; height: 18; border: 0px solid #666666; text-align: left;}</style><script>var objInput = null;var objTd = null;var num =null;function AutoEdit(obj,id){ if (objInput == null) { objTd = obj; obj.innerHTML = '<input size='10' maxlength='10' type='text' value='' + obj.innerText + '' onblur='objTd.innerText=this.value;LoadData(objTd.innerText,num);objInput=null;' style='overflow:visible;border:none;background-color:#EFEFEF'>'; objInput = document.getElementById('objInput'); objInput.focus(); }}
function LoadData(LoadIndex,LoadObj){ var LoadFileName='load.php?action=' + LoadIndex + '&num=' + LoadObj; document.getElementById('LoadDataSrc').src = LoadFileName;}function OutPutData(obj){ if (form1.num1.value.length<1){ alert('請輸入數量1'); return false;} if (form1.num2.value.length<1){ alert('請輸入數量2'); return false;} if (document.getElementById('name1').innerHTML.length<1){ alert('name1空值'); return false;} if (document.getElementById('name2').innerHTML.length<1){ alert('name2空值'); return false;} obj.innerHTML='<input type='hidden' name='name1' value='' + document.getElementById('name1').innerHTML + ''>'; obj.innerHTML+='<input type='hidden' name='name2' value='' + document.getElementById('name2').innerHTML + ''>'; obj.innerHTML+='<input type='hidden' name='type1' value='' + document.getElementById('type1').innerHTML + ''>'; obj.innerHTML+='<input type='hidden' name='type2' value='' + document.getElementById('type2').innerHTML + ''>'; obj.innerHTML+='<input type='hidden' name='date1' value='' + document.getElementById('date1').innerHTML + ''>'; obj.innerHTML+='<input type='hidden' name='date2' value='' + document.getElementById('date2').innerHTML + ''>'; obj.innerHTML+=form1.submit();}function postdata(){ form1.submit();;}</script></head><body><form name='form1' method='post' action='load.php?action=OutPutData'><table cellpadding='0' cellspacing='1' bgcolor='#999999'><tr bgcolor='#EFEFEF'> <td onclick='AutoEdit(this,num=1)' style='width: 200px;overflow:visible;word-break:break-all;'><div></div></td> <td onclick='AutoEdit(this,num=2)' style='width: 200px;overflow:visible;word-break:break-all;'><div></div></td></tr><tr bgcolor='#EFEFEF'> <td><div style='width: 200px;overflow:visible;word-break:break-all;'>a</div></td> <td><div style='width: 200px;overflow:visible;word-break:break-all;'>b</div></td></tr><tr bgcolor='#EFEFEF'> <td><div style='width: 200px;overflow:visible;word-break:break-all;'>a</div></td> <td><div style='width: 200px;overflow:visible;word-break:break-all;'>b</div></td></tr><tr bgcolor='#EFEFEF'> <td><div style='width: 200px;overflow:visible;word-break:break-all;'></div></td> <td><div style='width: 200px;overflow:visible;word-break:break-all;'></div></td></tr><tr bgcolor='#EFEFEF'> <td><div><input type='text' name='num1' value=''></div></td> <td><div><input type='text' name='num2' value=''></div></td></tr><div id='OutPutData'><a href='http://www.piao2010.com/bcjs/21667.html#' onclick='java script:OutPutData(this);'>輸出</a></div></form></body></html>------------------------------------------------------
LOAD.php
PHP代碼:-----------------------------------------------
<?phpheader('Cache-Control: no-store, no-cache,must-revalidate');include('obj/financial_obj_free.inc')//這個文件里的內容是連接MYSQL的語句。$str=$_GET['action'];$num=$_GET['num'];if ($str=='OutPutData') OutPutData();else { linkdata('financial',1); $sql='select * from table where id='$str''; if ($query=mysql_query($sql)) { $temdata=mysql_fetch_row($query); //看看是不是空的，如果是就附上值以免JS報錯。 if (strlen($temdata[2])<1||$temdata[2]=='') $temdata[2]='空'; $temdata[2]=htmlspecialchars($temdata[2]); if (strlen($temdata[3])<1||$temdata[3]=='') $temdata[3]='空'; $temdata[3]=htmlspecialchars($temdata[3]); if (strlen($temdata[5])<1||$temdata[5]=='') $temdata[5]='空'; $temdata[5]=htmlspecialchars($temdata[5]); } else { $temdata[2]=$temdata[3]=$temdata[5]='查詢失敗'; } switch ($num)//這個主要是用于檢查是從第幾列(行)傳過來的。注意變量值要與input的id值對應好.否則出錯 { case 1: $diva='name1'; $divb='type1'; $divc='date1'; break; case 2: $diva='name2'; $divb='type2'; $divc='date2'; break; default: $diva='name1'; $divb='type1'; $divc='date1'; break; } //確定節點,輸出$temdata[X]到節點$divX; echo 'document.getElementById(''.$diva.'').innerHTML=''.$temdata[2].'';'; echo 'document.getElementById(''.$divb.'').innerHTML=''.$temdata[3].'';'; echo 'document.getElementById(''.$divc.'').innerHTML=''.$temdata[5].'';'; }
function OutPutData() //這下面如果改成SQL語句就可以寫進數據庫{ echo '輸出的數據如下，改成SQL語句然后就可以保存下來'; echo '編號1='.$_POST['name1'].'<br>'; echo '編號2='.$_POST['name2'].'<br>'; echo '名稱1='.$_POST['type1'].'<br>'; echo '名稱2='.$_POST['type2'].'<br>'; echo '日期1='.$_POST['date1'].'<br>'; echo '日期2='.$_POST['date2'].'<br>'; echo '數量1='.$_POST['num1'].'<br>'; echo '數量2='.$_POST['num2'].'<br>'; echo '<a href='http://www.piao2010.com/bcjs/text_input.php'>返回</a>';}?>
網公網安備