如何使用ajax和PHP创建和填充div元素？

Question

我在这里早些时候问过一个类似的问题，它使我走上了正确的道路，但我仍然有些困惑。 但是，现在我知道了如何提出一个受过高等教育的问题。

我有一个要连接的数据库，表名称为PRODUCTS。 在“产品”中有“ ID”，“库存”，“ SHORTNAME”，“ DESCRIPTION”，“ PRICE”和“ SHIPPING”列。

如果用户单击一个按钮，我需要发送一个请求以查找PRODUCTS中的所有行。 我相信以下file.php可以实现这一点（未显示数据库连接代码）。

$query = "SELECT `ID` FROM `PRODUCTS`";
$result = mysql_query($query) or die('Query failed:'.mysql_error());
$num=mysql_numrows($result);

当用户单击按钮并获得$ num时，它需要创建与行数一样多的div元素。 我可以使用for()来做到这一点，但是我不确定100％如何做到这一点。 另外，我不确定如何在Jquery中做到这一点，而不仅仅是JS。

function ajaxFunction(phpFunction){
    var ajaxRequest;  

    try{
                ajaxRequest = new XMLHttpRequest();
    } catch (e){
                    try{
            ajaxRequest = new ActiveXObject("Msxml2.XMLHTTP");
        } catch (e) {
            try{
                ajaxRequest = new ActiveXObject("Microsoft.XMLHTTP");
            } catch (e){
                alert("Your browser broke!");
                return false;
            }
        }
    }
    // Create a function that will receive data sent from the server
    ajaxRequest.onreadystatechange = function(){
        if(ajaxRequest.readyState == 4){


for (var i = 0; i < ajaxRequest.responseText ; i++)
//Create Div code here


        }
    }


    var url = "file.php;

    ajaxRequest.open("GET", url, true);
    ajaxRequest.send(null); 
}

所以这是最后的问题：

1. 如果用户单击特定的div（ #revealProductButton ），如何创建与$num返回的div一样多的div？
2. 如何使那些创建的div显示来自数据库的STOCK, PRICE, and SHIPPING ？ 每个div必须显示其自身的信息，而不仅仅是显示所有内容的一个div。
3. 如果用户随后单击了所创建的div之一，那么我该如何显示DB中的其余信息（DESCRIPTION等），但仅显示被单击的div？
4. 如何编写我的file.php以使用所有这些？

Answer 1

最简单的方法是这样的：

function fetchData(){
  var url = 'file.php';
  // The jQuery way to do an ajax request
  $.ajax({            
    type: "POST",
    url: url,
    data: "", // Your parameters here. (like "dummy=1&sort=description")
    success: function(html){
      // html contains the literal response from the server
      $("#result").html(html);
    }
  });
}

php脚本的响应将直接写入#result。

现在在php端，您可以只输出html：

$result = mysql_query($myQuery);
while ($row = mysql_fetch_assoc($result)) {
  echo '<div>'.$row['description'].'</div>';
}

这只是一种快速的“肮脏方法”。 一种替代方法是从php脚本返回一个json对象，然后在javascript中进一步处理该对象。

Answer 2

如果用户单击按钮，我需要发送请求以查找“ PRODUCTS”中的所有行

 SELECT `ID` FROM `PRODUCTS` 

注意，此查询仅从所有记录而不是所有记录数据中检索ID值。 这是你想要的吗？

要回答您的问题：

1）PHP脚本应返回特定格式，例如XML或JSON（首选IMHO）。 如果您打算将每个结果记录粘贴到新的DIV中，则返回的集合数将决定您创建多少DIV元素。 例如，JSON响应具有一个包含10个元素的集合（数组）。 您遍历数组中的每个元素，并根据数组大小创建N个DIV元素。

2）确定要为这些值创建一个新的DIV吗？ 不是TABLE中的TR元素？

3）您将格式化返回的数据，使其最初被“隐藏”，并对主要的DIV元素使用onclick处理程序，使记录数据与“显示”其他数据相关。 它全部在页面上，只是被隐藏，您无需创建新的XHR调用。

4）在线有很多与Ajax相关的教程。 找到一个并开始修补。 换句话说，它太复杂了，以至于无法在这里画几行。

尽管我通常不跳JS库的潮流，但您可能想看一下jQuery，它将使这些任务变得轻而易举。 但是，您应该了解底层的JS代码以及如何发出请求。

Answer 3

您可以执行以下操作：

for (var i = 0; i < ajaxRequest.responseText ; i++)
{
  var div = document.createElement("div");
  var doc = document.getElementsByTagName("body")[0];
  doc.appendChild(div);
  div.setAttribute("id", "div_" + i);

  // now some php code to get STOCK, PRICE, and SHIPPING through sql queries
  // ...........................
  // ...........................
  // ...........................

  // javascript again
  document.getElementById("div_" + i).innerHTML = <?php echo $price, $shipping, etc in any way you want?>;

  div.onclick = function()
  {
    // again php code to get more info like DESCRIPTION
    //..................

    document.getElementById("div_" + i).innerHTML += '<br /><br />' + <?php echo $description?>;
  };
}

希望能有所帮助。

Answer 4

既然您提到了jQuery框架，为什么不考虑使用javascript模板呢？ 它使您可以简单地用HTML构建div（及其所有子级），并在需要时使用任意数据填充它们。

去看看 http://aefxx.com/jquery-plugins/jqote ，这是一个jQuery插件，可让您执行上述操作。

您可以在jQuery中像这样使用它：

<script type="text/html" id="template">
    <![CDATA[
        <div class="product">
            <a href="...">Product ID: <%= this.id %></a>
        </div>
    ]]>
</script>

<script type="text/javascript">
    // Let's pretend your ajax call returns an array in json notation like so:
    // [{"id": "1", "shortname": "Shoe"}, {"id": "2", "shortname": "Shirt"}]
    $.ajax({
        url: '/file.php',
        ....
        success: function(data) {
            $('#template').jqote(data).appendTo('#container');
        }
    });
</script>

这将为您提供附加到ID为“容器”的元素的div，这些div填充有从数据库返回的数据。

希望我能帮上忙。 干杯