利用js调用后台php进行数据处理原码
2018-09-07 11:55
該方法已經屬於過時方法,其中關鍵的地方也從論壇上得來的,我只是把它消化吸收后重新写了更全面的出来。公布出來只是希望更多的新手能從中學到一些東西。如果你對該代碼有任何意見可以留言,但請勿進行人身攻擊,我是一個菜鳥只能寫出這樣的東西,每个老鸟都有这样的过程。
鉴于时间问题,代碼的提交部分使用的是传统的表单POST,如果您喜欢可以根据LOAD过程自行加上相应的SCRIPT,不过好像只
能用GET了。聽說XML可以實現真正的無刷新,如果誰手上有希望能借來看看。
在此感謝QQ群組中蓝劍雪狐和shelly水在JS上給予的幫助,也新手們能把自己寫的功能代碼貼出來大家一起來學習研究。
最後附上演示地址:請喜歡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>
<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;
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>
<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); //这个文件里的内容是连接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>;
}
?>
上一篇:phpwind中的数据库操作类
下一篇:php表单处理操作