該方法已經(jīng)屬於過時方法,其中關(guān)鍵的地方也從論壇上得來的,我只是把它消化吸收后重新寫了更全面的出來。公布出來只是希望更多的新手能從中學(xué)到一些東西。如果你對該代碼有任何意見可以留言,但請勿進(jìn)行人身攻擊,我是一個菜鳥只能寫出這樣的東西,每個老鳥都有這樣的過程。 鑒于時間問題,代碼的提交部分使用的是傳統(tǒng)的表單POST,如果您喜歡可以根據(jù)LOAD過程自行加上相應(yīng)的SCRIPT,不過好像只 能用GET了。聽說XML可以實現(xiàn)真正的無刷新,如果誰手上有希望能借來看看。 在此感謝QQ群組中藍(lán)劍雪狐和shelly水在JS上給予的幫助,也新手們能把自己寫的功能代碼貼出來大家一起來學(xué)習(xí)研究。 最後附上演示地址:http://lfox0002.dns0755.net/text_input.php 請喜歡HACK他人機器的朋友們手下留情,附上演示是為了讓朋友們能更快了解代碼。 input.php[HTML] 接受用戶輸入數(shù)據(jù)。
PHP代碼:----------------------------------------------
<?php /* 申 明 ------------------------------ 該演示文件詳細(xì)描述了利用JS+PHP對數(shù)據(jù)庫進(jìn)行類似無刷新讀出寫入的方法 2004年02月14日 By L.Fox */ header("Cache-Control: no-store, no-cache,must-revalidate"); //這兩行可以取消,把文件存成HTML echo $_POST["name1"]; //我是為了?#123;試方便才加的。 ?> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=??????"> <title>根據(jù)編號從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 + "\" id=\"objInput\" 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("請輸入數(shù)量1"); return false;} if (form1.num2.value.length<1){ alert("請輸入數(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 width="400" cellpadding="0" cellspacing="1" align="center" 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 id="name1" style="width: 200px;overflow:visible;word-break:break-all;">a</div></td> <td><div id="name2" style="width: 200px;overflow:visible;word-break:break-all;">b</div></td> </tr> <tr bgcolor="#EFEFEF"> <td><div id="type1" style="width: 200px;overflow:visible;word-break:break-all;">a</div></td> <td><div id="type2" style="width: 200px;overflow:visible;word-break:break-all;">b</div></td> </tr> <tr bgcolor="#EFEFEF"> <td><div id="date1" style="width: 200px;overflow:visible;word-break:break-all;"></div></td> <td><div id="date2" 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="#" onclick="java script:OutPutData(this);">輸出</a></div></form> </body> </html> ------------------------------------------------------ LOAD.php PHP代碼:----------------------------------------------- <?php header("Cache-Control: no-store, no-cache,must-revalidate"); include("obj/financial_obj_free.inc"); //這個文件里的內(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報錯。 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值對應(yīng)好.否則出錯 { 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é)點,輸出$temdata[X]到節(jié)點$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ù)庫 { echo "輸出的數(shù)據(jù)如下,改成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 "數(shù)量1=".$_POST["num1"]."<br>"; echo "數(shù)量2=".$_POST["num2"]."<br>"; echo "<a href=\"text_input.php\">返回</a>"; } ?>
|