网页开发的阶段总结（四）--JS与PHP之间大数据的传送
浏览数：55 /
时间：2015年06月09日
在前面 的网页开发的阶段总结（三）中，我们知道JS与PHP之间直接互相调用，往往有很多不便，而且一次只能传送一个数据结果进行返回。而通过ajax方法可以实现JS一次性读取php的所传送过来的大量数据。通过提交表单的方式，让php可以一次性读取JS的大量数据。
1、借用AJAX方法，通过php读取数据库将大量数据显示在网页客户端上。
a、页面一加载完，执行函数Gett()，代码如下：
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset="gb2312">
<title></title><script language="JavaScript" src="javascript.js"></script>
<script language="JavaScript">
function Gett()
{
if (window.XMLHttpRequest)
{
// code for IE7+, Firefox, Chrome, Opera, Safari
xmlHttp=new XMLHttpRequest();
var url="responsexml.php";
xmlHttp.open("GET",url,false);
xmlHttp.send(null);
xmlHttp.onreadystatechange=getValue(xmlHttp);
}
else
{
// code for IE6, IE5
xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");
var url="responsexml.php";
xmlHttp.onreadystatechange=function()
{
if (xmlHttp.readyState==4 && xmlHttp.status==200)
{
xmlDoc=xmlHttp.responseXML;
nodes=xmlDoc.documentElement.childNodes;
InputVoltage.innerHTML = nodes.item(3).text;
OutputVoltage.innerHTML = nodes.item(7).text;
OutputMinVoltage.innerHTML = nodes.item(34).text;
OutputMaxVoltage.innerHTML = nodes.item(33).text;
Frequency.innerHTML = nodes.item(13).text;
xmlHttp = null;
}
}
xmlHttp.open("GET",url,true);
xmlHttp.send(null);
}
}
</script>
</head>
<body onload="Gett()">
<p> </p>
<div align="center">
<br>
<table width="75%" border="0" cellspacing="0">
<tr>
<td width="25%" nowrap><br>
<table width="75%" border="0" align="center" cellspacing="0">
<tr>
<td width="50%" nowrap>InputVoltage</td>
<td width="50%" height="22" nowrap>
<span id='InputVoltage'></span> V
</td>
</tr>
<tr>
<td nowrap>Frequency</td>
<td nowrap>
<span id='Frequency'></span> Hz
</td>
</tr>
</table></td>
<td width="50%" nowrap>
<div align="center">
</div></td>
<td width="25%" nowrap>
<table width="98%" height="100" border="0" cellspacing="0">
<tr>
<td width="50%" nowrap>OutputVoltage</td>
<td width="50%" height="22" nowrap>
<span id='OutputVoltage'></span> V
</td>
</tr>
<tr>
<td nowrap>OutputMaxVoltage</td>
<td height="22" nowrap>
<span id='OutputMaxVoltage'></span> V
</td>
</tr>
<tr>
<td nowrap>OutputMinVoltage</td>
<td height="22" nowrap>
<span id='OutputMinVoltage'></span> V
</td>
</tr>
</div>
</body>
</html>b、在服务端，将数据库的内容转为一维数组，并用xml格式保存起来。
<?php
$dbh = new PDO("sqlite:upsdata.dat", null, null);
$sth = $dbh->query('SELECT * FROM t_ups_rundata');
$result = $sth->fetchAll();
$i=0;
$CountArray=0;
foreach($result[0] as $x=>$x_value)
{
if($i%2==0)
{
$UPSData[$CountArray++]=$x_value;
}
$i++;
}
header('Content-Type: text/xml');
echo "<?xml version='1.0' encoding='utf-8'?>";
echo "<upsdataxml>";
echo "<protocol_id>$UPSData[0]</protocol_id>";
echo "<curr_time>$UPSData[1]</curr_time>";
echo "<input_phase>$UPSData[2]</input_phase>";
echo "<inputvol_a>$UPSData[3]</inputvol_a>";
echo "<inputvol_b>$UPSData[4]</inputvol_b>";
echo "<inputvol_c>$UPSData[5]</inputvol_c>";
echo "<output_phase>$UPSData[6]</output_phase>";
echo "<outputvol_a>$UPSData[7]</outputvol_a>";
echo "<outputvol_b>$UPSData[8]</outputvol_b>";
echo "<outputvol_c>$UPSData[9]</outputvol_c>";
echo "<output_load>$UPSData[10]</output_load>";
echo "<batt_total_vol>$UPSData[11]</batt_total_vol>";
echo "<batt_cap>$UPSData[12]</batt_cap>";
echo "<input_fre>$UPSData[13]</input_fre>";
echo "<ups_model>$UPSData[14]</ups_model>";
echo "<ups_manufactory>$UPSData[15]</ups_manufactory>";
echo "<ups_ver>$UPSData[16]</ups_ver>";
echo "<rate_vol>$UPSData[17]</rate_vol>";
echo "<rate_power>$UPSData[18]</rate_power>";
echo "<rate_fre>$UPSData[19]</rate_fre>";
echo "<rate_battvol>$UPSData[20]</rate_battvol>";
echo "<is_acfail>$UPSData[21]</is_acfail>";
echo "<is_bypass>$UPSData[22]</is_bypass>";
echo "<is_battlow>$UPSData[23]</is_battlow>";
echo "<is_upsfail>$UPSData[24]</is_upsfail>";
echo "<is_shutdown>$UPSData[25]</is_shutdown>";
echo "<is_testting>$UPSData[26]</is_testting>";
echo "<is_ups_offline>$UPSData[27]</is_ups_offline>";
echo "<e_temperature>$UPSData[28]</e_temperature>";
echo "<e_humidity>$UPSData[29]</e_humidity>";
echo "<input_default_vol>$UPSData[30]</input_default_vol>";
echo "<batt_mon_vol>$UPSData[31]</batt_mon_vol>";
echo "<ups_temp>$UPSData[32]</ups_temp>";
echo "<output_max_vol>$UPSData[33]</output_max_vol>";
echo "<output_min_vol>$UPSData[34]</output_min_vol>";
echo "<batt_temp>$UPSData[35]</batt_temp>";
echo "<is_horn>$UPSData[36]</is_horn>";
echo "<is_ups_type>$UPSData[37]</is_ups_type>";
echo "<is_guard>$UPSData[38]</is_guard>";
echo "</upsdataxml>";
$dbh = null;
?>完整代码下载：http://download.csdn.net/detail/aba13579/7877307
2、通过提交表单的方式，在php服务器端的用$_GET()或$_POST()方式获取大量的数据写入数据库。
a、通过 <input class="inputButtonNormal" type="submit" name="b1" value="SubMit">的type="submit"类型将数据上传到PHP服务端上。
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset="gb2312">
<script language="JavaScript">
</script>
</head>
<body>
<form name="UPSCfg" target="id_iframe" method="post" action="UPSCfgForm.php">
<table width="80%" border="0" cellspacing="0" class="tableNormal" >
<tr bgcolor="#0099FF">
</tr>
<tr>
<td class="tableSingularLine" width="50%" nowrap>UpsCommBaud</td>
<td class="tableSingularLine" width="50%" nowrap>
<select name="UpsCommBaud" size="1" type="text">
<option value="1200"
<?php
$b=2400;
if ($b==1200)
echo("selected");
?>
>1200</option>
<option value="2400"
<?php
if (($b==2400)||($b==0))
echo("selected");
?>>2400</option>
<option value="4800"
<?php
if ($b==4800)
echo("selected");
?>>4800</option>
<option value="9600"
<?php
if ($b==9600)
echo("selected");
?>>9600</option>
<option value="14400"
<?php
if ($b==14400)
echo("selected");
?>>14400</option>
<option value="19200"
<?php
if ($b==19200)
echo("selected");
?>>19200</option>
<option value="38400"
<?php
if ($b==38400)
echo("selected");
?>>38400</option>
</select>
</td>
</tr>
<tr>
<td class="tableSingularLine" nowrap>OfflineQueryTime</td>
<td class="tableSingularLine" nowrap><input class="textEnaSty" name="OfflineQueryTime" type="text" value="1000" size="1">
</td>
</tr>
<tr>
<td class="tableSingularLine" nowrap>OfflineQueryNum</td>
<td class="tableSingularLine" nowrap><input class="textEnaSty" name="OfflineQueryNum" type="text" value="1" size="5"></td>
</tr>
</table>
<p>
<input class="inputButtonNormal" type="submit" name="b1" value="SubMit">
<input class="inputButtonNormal" type="reset" name="Reset" value="Cacel">
</p>
<iframe name="id_iframe" style="display:none;" src="about:blank"></iframe>
</form>
</body>
<html>b、PHP服务器端通过$_POST()获取数据写入数据库
<?php
$temp = array();
$temp[0] = $_POST["UpsCommBaud"];
$temp[1] = $_POST["OfflineQueryTime"];
$temp[2] = $_POST["OfflineQueryNum"];
try{
$IPGuard ="sqlite:ipguard.dat";
$dbh = new PDO($IPGuard, null, null);
$dbh->exec("UPDATE t_ups_protocol set baudrate='$temp[0]'");
$dbh->exec("UPDATE t_env_param set interval='$temp[1]',offLine_Count='$temp[2]'");
$dbh->beginTransaction();
$dbh = null;
}
catch (PDOException $e)
{
echo 'Connection failed: ' . $e->getMessage();
$dbh = null;
}
?>
完整代码下载：http://download.csdn.net/detail/aba13579/7877311
3、借用AJAX方式，一次性传递一个数据到php服务器上并一次性将一个数据返回给web客户端。
以下网址有详细介绍：http://www.w3school.com.cn/ajax/ajax_asp_php.asp，故不再详述。
郑重声明：本站内容如果来自互联网及其他传播媒体，其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享，并不代表本站赞同其观点和对其真实性负责，也不构成任何其他建议。
