Question

我早些时候问了一个类似的问题here，它让我走上了正确的轨道，但我仍然感到很难过。但是，现在我知道如何提出一个更有教育意义的问题。

我有一个我连接的数据库，表名为PRODUCTS。产品中包括ID，STOCK，SHORTNAME，DESCRIPTION，PRICE和SHIPPING。

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

$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); 
}

所以这是最后的问题：

如果用户点击特定div（#revealProductButton），如何创建与$num一样多的div？
如何从数据库中创建显示STOCK, PRICE, and SHIPPING的div？每个div必须显示它自己的信息，而不仅仅是一个显示所有内容的div。
如果用户然后单击其中一个创建的div，我该如何显示数据库中的其余信息（描述等），但仅针对被点击的div？
如何编写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（后者是首选，恕我直言）。如果您的意图是将每个结果记录粘贴到新的DIV中，则返回的集合数将决定您创建的DIV元素数量。例如，JSON响应有一个包含10个元素的集合（数组）。循环遍历数组中的每个元素，并根据数组大小创建N个DIV元素。

2）您确定要为这些值创建新的DIV吗？表中没有TR元素？

3）您将以最初“隐藏”的方式格式化返回数据，并使用onclick处理程序为主要DIV元素关联该记录数据以“显示”其他数据。它全部在页面上，它只是隐藏，您不需要创建新的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“container”的元素的div 从数据库返回数据。

希望我能提供帮助。欢呼声

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

4 个答案: