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