利用js調(diào)用后臺(tái)php進(jìn)行數(shù)據(jù)處理原碼
該方法已經(jīng)屬於過時(shí)方法，其中關(guān)鍵的地方也從論壇上得來的，我只是把它消化吸收后重新寫了更全面的出來。公布出來只是希望更多的新手能從中學(xué)到一些東西。如果你對(duì)該代碼有任何意見可以留言，但請(qǐng)勿進(jìn)行人身攻擊，我是一個(gè)菜鳥只能寫出這樣的東西，每個(gè)老鳥都有這樣的過程。
鑒于時(shí)間問題，代碼的提交部分使用的是傳統(tǒng)的表單POST，如果您喜歡可以根據(jù)LOAD過程自行加上相應(yīng)的SCRIPT,不過好像只能用GET了。聽說XML可以實(shí)現(xiàn)真正的無刷新，如果誰手上有希望能借來看看。
在此感謝QQ群組中藍(lán)劍雪狐和shelly水在JS上給予的幫助，也新手們能把自己寫的功能代碼貼出來大家一起來學(xué)習(xí)研究。
最後附上演示地址：http://lfox0002.dns0755.net/text_input.php 請(qǐng)喜歡HACK他人機(jī)器的朋友們手下留情，附上演示是為了讓朋友們能更快了解代碼。
input.php[HTML] 接受用戶輸入數(shù)據(jù)。
PHP代碼:----------------------------------------------
<?php/* 申;;;;;明 ------------------------------ 該演示文件詳細(xì)描述了利用JS+PHP對(duì)數(shù)據(jù)庫(kù)進(jìn)行類似無刷新讀出寫入的方法 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>根據(jù)編號(hào)從MYSQL提取數(shù)據(jù)進(jìn)行編輯并回存[演示]</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('請(qǐng)輸入數(shù)量1'); return false;} if (form1.num2.value.length<1){ alert('請(qǐng)輸入數(shù)量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.aoyou183.cn/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')//這個(gè)文件里的內(nèi)容是連接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報(bào)錯(cuò)。 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)//這個(gè)主要是用于檢查是從第幾列(行)傳過來的。注意變量值要與input的id值對(duì)應(yīng)好.否則出錯(cuò) { 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; } //確定節(jié)點(diǎn),輸出$temdata[X]到節(jié)點(diǎn)$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語句就可以寫進(jìn)數(shù)據(jù)庫(kù){ echo '輸出的數(shù)據(jù)如下，改成SQL語句然后就可以保存下來'; echo '編號(hào)1='.$_POST['name1'].'<br>'; echo '編號(hào)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 '數(shù)量1='.$_POST['num1'].'<br>'; echo '數(shù)量2='.$_POST['num2'].'<br>'; echo '<a href='http://www.aoyou183.cn/bcjs/text_input.php'>返回</a>';}?>
網(wǎng)公網(wǎng)安備