我有一个Javascript，可从mysql获取数据并以html形式显示它而无需刷新页面。鉴于我不存在的javascript知识，在StackOverflow社区（@Brant Olsen）的大力协助下，我得到了以下脚本。
该脚本可以正常工作以获取3个mysql结果字段。我想为此添加一个额外的2个字段，并以我的html形式显示它们。
工作脚本是：
<script type="text/javascript">
function showUser(userNumber, str)
{
if (str=="")
{
document.getElementById("txtHint" + userNumber).innerHTML="";
return;
}
if (window.XMLHttpRequest)
{// code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp=new XMLHttpRequest();
}
xmlhttp.onreadystatechange=function()
{
if (xmlhttp.readyState==4 && xmlhttp.status==200)
{
//document.getElementById("txtHint" + userNumber).innerHTML=xmlhttp.responseText;
var responseText = xmlhttp.responseText;
var description = responseText;
var warehouse = "";
var sellingUnits = "";
if (responseText.indexOf("NOT A VALID") == -1)
{
description = responseText.substring(12, responseText.indexOf(",Warehouse:"));
warehouse = responseText.substring(responseText.indexOf(",Warehouse:")+11, responseText.indexOf(",SellingUnits:"));
sellingUnits = responseText.substring(responseText.indexOf(",SellingUnits:")+14);
}
document.getElementById("whse" + userNumber).innerHTML = warehouse;
document.getElementById("txtHint" + userNumber).innerHTML = description;
document.getElementById("su" + userNumber).innerHTML = sellingUnits;
}
}
xmlhttp.open("GET","getdata1.php?q="+str,true);
xmlhttp.send();
}
</script>
getdata1.php是：
<?php
$q=$_GET["q"];
$con = mysql_connect('localhost', 'dbuser', 'dbpass');
if (!$con)
{
die('Could not connect: ' . mysql_error());
}
mysql_select_db("dbname", $con);
$sql="SELECT Category, Description,SellingUnits,Grouping,CasesPerPallet,ShrinksPerPallet FROM skudata WHERE packcode = '".$q."'";
$result = mysql_query($sql);
$rows=mysql_num_rows($result);
if($rows==0){echo "<font color=red><b>NOT A VALID PRODUCT CODE</b></font>";} else {
while($row = mysql_fetch_array($result))
{
echo "Description:" . $row['Description'] . ",Warehouse:" . $row['Grouping'] . ",SellingUnits:" . $row['SellingUnits'];
}
}
mysql_close($con);
?>
我用我想传递给html表单的其他字段更改了getdata1.php：
$sql="SELECT Category, Description,SellingUnits,Grouping,CasesPerPallet,ShrinksPerPallet,if(SellingUnits='cs', CasesPerPallet,ShrinksPerPallet) as SUQTY FROM skudata WHERE packcode = '".$q."'";
$result = mysql_query($sql);
$rows=mysql_num_rows($result);
if($rows==0){echo "<font color=red><b>NOT A VALID PRODUCT CODE</b></font>";} else {
while($row = mysql_fetch_array($result))
{
echo "Description:" . $row['Description'] . ",Warehouse:" . $row['Grouping'] . ",SellingUnits:" . $row['SellingUnits'] . ",SUQTY:" . $row['SUQTY'] . ",Category:" . $row['Category']; ;
}
}
从这里开始，我将努力为附加的两个字段正确编码。表格行的示例如下：
<tr id="r1">
<td>
<input type=checkbox name=kvi1 id=kvi1 value=1>
</td>
<td>
<input size=10 type=number id=sku1 name=sku1 onchange="showUser(1, this.value)"><a href="sku.php" target="_blank"><img src=q.png border=0></a>
</td>
<td>
<div align="left" id="txtHint1"> </div>
</td>
<td>
<div align="left" id="whse1"> </div>
</td>
<td>
<div align="left" id="su1"> </div>
</td>
<td>
<div align="left" id="suqty1"> </div>
</td>
<td>
<div align="left" id="category1"> </div>
</td>
</tr>
我按如下方式编辑了javascript，但没有成功，有人可以帮忙吗？
<script type="text/javascript">
function showUser(userNumber, str)
{
if (str=="")
{
document.getElementById("txtHint" + userNumber).innerHTML="";
return;
}
if (window.XMLHttpRequest)
{// code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp=new XMLHttpRequest();
}
xmlhttp.onreadystatechange=function()
{
if (xmlhttp.readyState==4 && xmlhttp.status==200)
{
//document.getElementById("txtHint" + userNumber).innerHTML=xmlhttp.responseText;
var responseText = xmlhttp.responseText;
var description = responseText;
var warehouse = "";
var sellingUnits = "";
var SUQTY = "";
var Category = "";
if (responseText.indexOf("NOT A VALID") == -1)
{
description = responseText.substring(12, responseText.indexOf(",Warehouse:"));
warehouse = responseText.substring(responseText.indexOf(",Warehouse:")+11, responseText.indexOf(",SellingUnits:"));
sellingUnits = responseText.substring(responseText.indexOf(",SellingUnits:")+11, responseText.indexOf(",SUQTY:"));
suqty = responseText.substring(responseText.indexOf(",SUQTY:")+11, responseText.indexOf(",Category:"));
category = responseText.substring(responseText.indexOf(",Category:")+14);
}
document.getElementById("whse" + userNumber).innerHTML = warehouse;
document.getElementById("txtHint" + userNumber).innerHTML = description;
document.getElementById("su" + userNumber).innerHTML = sellingUnits;
document.getElementById("suqty" + userNumber).innerHTML = SUQTY;
document.getElementById("category" + userNumber).innerHTML = Category;
}
}
xmlhttp.open("GET","getdata1.php?q="+str,true);
xmlhttp.send();
}
</script>
谢谢，
瑞安
最佳答案
我知道您不会喜欢这个答案，因为它需要您重新编写代码，但我会尽力提供帮助。
实际上，通过ajax调用在PHP和JS之间发送的具有这种性质的任何类型的数据，都应使用> = PHP5.3中固有的JSON。这样做的好处是Ajax和PHP可以在应用程序级别上进行任何真实解析的情况下来回传递数据。同样，它非常容易在将来改变。如果您需要再次更改它，那是完美的。
注意：如果您的PHP版本低于5.3，并且您没有努力安装JSON插件，请不要使用下面的代码。此外，JSON对象在较旧的浏览器中也不是本地的。 http://caniuse.com/json
PHP方面
使while循环内的回显看起来像这样：
echo json_encode(array(
"description" => $row['Description'],
"warehouse" => $row['Grouping'],
"sellingunits" => $row['SellingUnits'],
"suqty" => $row['SUQTY'],
"category" => $row['Category']
));
JS边
var data = {};
if (responseText.indexOf("NOT A VALID") == -1) {
data = JSON.parse(responseText);
}
// Check the values or just place an empty string if undefined
document.getElementById("whse" + userNumber).innerHTML = data.warehouse || '';
document.getElementById("txtHint" + userNumber).innerHTML = data.description || '';
document.getElementById("su" + userNumber).innerHTML = data.sellingunits || '';
document.getElementById("suqty" + userNumber).innerHTML = data.suqty || '';
document.getElementById("category" + userNumber).innerHTML = data.category || '';