利用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='https://www.haobala.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='https://www.haobala.com/bcjs/text_input.php'>返回</a>';}?>
网公网安备