利用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"); //這兩行可以取消，把文件存成HTML

　　echo $_POST["name1"]; //我是為了?#123;試方便才加的。

　　<html>

　　<head>

　　<title>根据编号从MYSQL提取数据进行编辑并回存[演示]</title>

　　<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>

　　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("请输入数量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>

　　</tr>

　　</tr>

　　</tr>

　　</tr>

　　</tr>

　　</body>

　　</html>

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

　　LOAD.php

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

　　<?php

　　header("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=\"text_input.php\">返回</a>";

　　}

教程首页更多教程