欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

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

程序员文章站 2022-10-06 10:26:02
該方法已經屬於過時方法,其中關鍵的地方也從論壇上得來的,我只是把它消化吸收后重新写了更全面的出来。公布出來只是希望更多的新手能從中學到一些東西。如果你對該代碼有任何意見可以...

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

鉴于时间问题,代碼的提交部分使用的是传统的表单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>
<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 + "\"
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>";
}
?>