利用js调用后台php进行数据处理原码

該方法已經屬於過時方法，其中關鍵的地方也從論壇上得來的，我只是把它消化吸收后重新写了更全面的出来。公布出來只是希望更多的新手能從中學到一些東西。如果你對該代碼有任何意見可以留言，但請勿進行人身攻擊，我是一個菜鳥只能寫出這樣的東西，每个老鸟都有这样的过程。

鉴于时间问题，代碼的提交部分使用的是传统的表单POST，如果您喜欢可以根据LOAD过程自行加上相应的SCRIPT,不过好像只
能用GET了。聽說XML可以實現真正的無刷新，如果誰手上有希望能借來看看。

在此感謝QQ群組中蓝劍雪狐和shelly水在JS上給予的幫助，也新手們能把自己寫的功能代碼貼出來大家一起來學習研究。

最後附上演示地址： http://lfox0002.dns0755.net/text_input.php 請喜歡HACK他人機器的朋友們手下留情，附上演示是為了讓朋友們能更快了解代碼。

input.php[HTML] 接受用户输入数据。

PHP代码:----------------------------------------------

 1   
 2/*   
 3申 明   
 4\------------------------------   
 5该演示文件详细描述了利用JS+PHP对数据库进行類似無刷新读出写入的方法   
 6  
 72004年02月14日   
 8By L.Fox   
 9*/ 
10
11header("Cache-Control: no-store, no-cache,must-revalidate"); //這兩行可以取消，把文件存成HTML   
12echo $_POST["name1"]; //我是為了?#123;試方便才加的。

  1<html>
  2<head>
  3<meta content="text/html; charset=utf-8" http-equiv="Content-Type"/>
  4<title>根据编号从MYSQL提取数据进行编辑并回存[演示]</title>
  5<script id="LoadDataSrc" language="JavaScript"></script>
  6<style>   
  7body {   
  8font-family: "Verdana", "Arial", "Helvetica", "sans-serif";   
  9font-size: 12px;   
 10line-height: 17px;   
 11scrollbar-base-color: #BBBBBB;   
 12scrollbar-shadow-color: #BBBBBB;   
 13scrollbar-highlight-color: #FFFFFF;   
 14scrollbar-3dlight-color: #000000;   
 15scrollbar-darkshadow-color: #000000;   
 16scrollbar-arrow-color: #FFFFFF;   
 17}   
 18table {   
 19border: 0;   
 20font-size: 12px;   
 21cursor: default;   
 22}   
 23td {   
 24text-align: left;   
 25height: 20;   
 26}   
 27input {   
 28width: 100;   
 29height: 18;   
 30border: 0px solid #666666;   
 31text-align: left;   
 32}   
 33</style>
 34<script>   
 35var objInput = null;   
 36var objTd = null;   
 37var num =null;   
 38function AutoEdit(obj,id)   
 39{   
 40if (objInput == null)   
 41{   
 42objTd = obj;   
 43obj.innerHTML = "<input size=\"10\" maxlength=\"10\" type=\"text\" value=\"" + obj.innerText + "\"   
 44id=\"objInput\" onblur=\"objTd.innerText=this.value;LoadData(objTd.innerText,num);objInput=null;\" style=\"overflow:   
 45visible;border:none;background-color:#EFEFEF\">";   
 46objInput = document.getElementById("objInput");   
 47objInput.focus();   
 48}   
 49} 
 50
 51function LoadData(LoadIndex,LoadObj)   
 52{   
 53var LoadFileName="load.php?action=" + LoadIndex + "&num=" + LoadObj;   
 54document.getElementById("LoadDataSrc").src = LoadFileName;   
 55}   
 56function OutPutData(obj)   
 57{   
 58if (form1.num1.value.length<1){ alert("请输入数量1"); return false;}   
 59if (form1.num2.value.length<1){ alert("请输入数量2"); return false;}   
 60if (document.getElementById("name1").innerHTML.length<1){ alert("name1空值"); return false;}   
 61if (document.getElementById("name2").innerHTML.length<1){ alert("name2空值"); return false;}   
 62obj.innerHTML="<input type=\"hidden\" name=\"name1\" value=\"" + document.getElementById("name1").innerHTML + "\">";   
 63obj.innerHTML+="<input type=\"hidden\" name=\"name2\" value=\"" + document.getElementById("name2").innerHTML + "\">";   
 64obj.innerHTML+="<input type=\"hidden\" name=\"type1\" value=\"" + document.getElementById("type1").innerHTML + "\">";   
 65obj.innerHTML+="<input type=\"hidden\" name=\"type2\" value=\"" + document.getElementById("type2").innerHTML + "\">";   
 66obj.innerHTML+="<input type=\"hidden\" name=\"date1\" value=\"" + document.getElementById("date1").innerHTML + "\">";   
 67obj.innerHTML+="<input type=\"hidden\" name=\"date2\" value=\"" + document.getElementById("date2").innerHTML + "\">";   
 68obj.innerHTML+=form1.submit();   
 69}   
 70function postdata()   
 71{   
 72form1.submit();   
 73}   
 74</script>
 75</head>
 76<body>
 77<form action="load.php?action=OutPutData" method="post" name="form1">
 78<table align="center" bgcolor="#999999" cellpadding="0" cellspacing="1" width="400">
 79<tr bgcolor="#EFEFEF">
 80<td onclick="AutoEdit(this,num=1)" style="width: 200px;overflow:visible;word-break:break-all;"><div></div></td>
 81<td onclick="AutoEdit(this,num=2)" style="width: 200px;overflow:visible;word-break:break-all;"><div></div></td>
 82</tr>
 83<tr bgcolor="#EFEFEF">
 84<td><div id="name1" style="width: 200px;overflow:visible;word-break:break-all;">a</div></td>
 85<td><div id="name2" style="width: 200px;overflow:visible;word-break:break-all;">b</div></td>
 86</tr>
 87<tr bgcolor="#EFEFEF">
 88<td><div id="type1" style="width: 200px;overflow:visible;word-break:break-all;">a</div></td>
 89<td><div id="type2" style="width: 200px;overflow:visible;word-break:break-all;">b</div></td>
 90</tr>
 91<tr bgcolor="#EFEFEF">
 92<td><div id="date1" style="width: 200px;overflow:visible;word-break:break-all;"></div></td>
 93<td><div id="date2" style="width: 200px;overflow:visible;word-break:break-all;"></div></td>
 94</tr>
 95<tr bgcolor="#EFEFEF">
 96<td><div><input name="num1" type="text" value=""/></div></td>
 97<td><div><input name="num2" type="text" value=""/></div></td>
 98</tr>
 99<div id="OutPutData"><a href="#" onclick="java script:OutPutData(this);">输出</a></div></table></form>
100</body>
101</html>

------------------------------------------------------

LOAD.php

PHP代码:-----------------------------------------------

 1   
 2header("Cache-Control: no-store, no-cache,must-revalidate");   
 3include("obj/financial_obj_free.inc"); //这个文件里的内容是连接MYSQL的语句。   
 4$str=$_GET["action"];   
 5$num=$_GET["num"];   
 6if ($str=="OutPutData") OutPutData();   
 7else   
 8{   
 9linkdata("financial",1);   
10$sql="select * from table where id='$str'";   
11if ($query=mysql_query($sql))   
12{   
13$temdata=mysql_fetch_row($query); //看看是不是空的，如果是就附上值以免JS报错。   
14if (strlen($temdata[2])<1||$temdata[2]=="") $temdata[2]="空";   
15$temdata[2]=htmlspecialchars($temdata[2]);   
16if (strlen($temdata[3])<1||$temdata[3]=="") $temdata[3]="空";   
17$temdata[3]=htmlspecialchars($temdata[3]);   
18if (strlen($temdata[5])<1||$temdata[5]=="") $temdata[5]="空";   
19$temdata[5]=htmlspecialchars($temdata[5]);   
20}   
21else   
22{   
23$temdata[2]=$temdata[3]=$temdata[5]="查询失败";   
24}   
25switch ($num) //这个主要是用于检查是从第几列(行)传过来的。注意变量值要与input的id值对应好.否则出错   
26{   
27case 1:   
28$diva="name1";   
29$divb="type1";   
30$divc="date1";   
31break;   
32case 2:   
33$diva="name2";   
34$divb="type2";   
35$divc="date2";   
36break;   
37default:   
38$diva="name1";   
39$divb="type1";   
40$divc="date1";   
41break;   
42}   
43//确定节点,输出$temdata[X]到节点$divX;   
44echo "document.getElementById('".$diva."').innerHTML='".$temdata[2]."';";   
45echo "document.getElementById('".$divb."').innerHTML='".$temdata[3]."';";   
46echo "document.getElementById('".$divc."').innerHTML='".$temdata[5]."';";   
47} 
48
49  
50function OutPutData() //这下面如果改成SQL语句就可以写进数据库   
51{   
52echo "输出的数据如下，改成SQL语句然后就可以保存下来";   
53echo "编号1=".$_POST["name1"]."

1";   
2echo "编号2=".$_POST["name2"]."

1";   
2echo "名称1=".$_POST["type1"]."

1";   
2echo "名称2=".$_POST["type2"]."

1";   
2echo "日期1=".$_POST["date1"]."

1";   
2echo "日期2=".$_POST["date2"]."

1";   
2echo "数量1=".$_POST["num1"]."

1";   
2echo "数量2=".$_POST["num2"]."

1";   
2echo "

1";   
2}