使用Javascript添加时未包含在div中的元素

时间:2014-02-03 19:27:43

标签: javascript php html dom

我的网站上有一个目录产品列表。以下PHP代码使用javascript创建div并在其中插入所有产品描述链接。

$sql = "SELECT * from Products ORDER BY `Name` ASC";
$result = mysqli_query($con, $sql);
echo "<script>document.getElementById('products').innerHTML = '<div class=ks>';</script>";
while($row = mysqli_fetch_assoc($result))
{
    $rowid = $row['Id'];
    $xx = '<a href="Getdesc.php?hid='.$rowid . '" class=lnk>' . $row['Name'] . '</a><br>';
    echo "<script>document.getElementById('products').innerHTML += '$xx';</script>";
}
echo "<script>document.getElementById('products').innerHTML += '</div>';</script>";

暂时忽略所有ks样式表类和所有mysql内容。 问题是它显示灰色背景div(样式表中的灰色) 那么链接。我需要链接在div中。 对于那些因与这个问题的主要目的无关的代码段而感到困惑的人的一点解释,

  1. MySQL中的Products表是一个包含所有产品信息的表,包括价格,名称,ID,e.t.c。

  2. "Getdesc.php?hid=..."链接是指向php网页的链接,该网页将显示该产品的所有相关信息。

  3. “产品”是包含此内部div的不同div的ID(使用我所说的产品)加上其他一些东西(我不想告诉你所有这些)。

  4. 对于杂乱的代码感到抱歉,提前谢谢。

2 个答案:

答案 0 :(得分:2)

<强>使用Javascript:

//from https://developer.mozilla.org/en-US/docs/Web/API/XMLHttpRequest/Using_XMLHttpRequest
function reqListener () {
  document.getElementById('products').innerHTML = this.responseText;
}

var oReq = new XMLHttpRequest();
oReq.onload = reqListener;
oReq.open("get", "yourFile.php", true);
oReq.send();

<强> PHP

$sql = "SELECT <columns> from Products ORDER BY `Name` ASC";
$result = mysqli_query($con, $sql);
echo '<div class="ks">';
while($row = mysqli_fetch_assoc($result))
{
  $rowid = $row['Id'];
  echo '<a href="Getdesc.php?hid=' . $rowid . '" class="lnk">' . htmlspecialchars($row['Name']) . '</a><br>';
}
echo '</div>'

答案 1 :(得分:1)

为什么不将所有内容放在变量中:

$html = '<div class="ks">'; // btw you forgot those double-quotes. you html won't evaluate the class if not surrounded by double-quotes
while($row = mysqli_fetch_assoc($result))
{
    $rowid = $row['Id'];
    $xx = '<a href="Getdesc.php?hid='.$rowid . '" class=lnk>' . $row['Name'] . '</a><br>';
    $html.= $xx;
}
$html.= '</div>';
然后回声呢?如果你正在使用php,那么在加载后不需要用javascript更改页面,你只是将页面的所有剩余部分发送到客户端,为什么不直接将这些代码放在正确的位置?

echo $html;