只有当包含他的div变为可见时才加载php页面

Question

我制作某种购物车，当我按下表格线时，它会打开一些关于该项目的细节，为此我使用了一个高度为0且最初隐藏的div，其中包含细节，问题是我认为浏览器将加载信息页面，无论是否按下该行。 有什么办法让浏览器只在他的DIV可见时加载页面？

    $int = 0;
            echo "<table class=\"result_table\" id=\"result_table\">";
    foreach($types as $data){
        echo "<tr onClick=\"present(".$int.");\" >";
        echo "<td align=\"right\">";
        echo $data['number'];
        echo "</td>";
        echo "<td align=\"right\">";
        echo $data['item_name'];
        echo "</td>";
        echo "<td align=\"right\">";
        echo $data['amount'];
        echo "</td>";
        echo "<td align=\"right\">";
        echo "17";
        echo "</td></tr>";
        echo "<tr class=\"info_row\"><td colspan=\"4\"><div      id=\"div_num_".$int."\" style=\"height:0px\">
            <object type=\"text/html\" data=\"page.php\"            style=\"width:100%; height:100%; margin:0%;\">
            </div></td></tr>";
        $int++;
    }
    echo "</form></table>";

行的CSS

.info_row{
    visibility:hidden;
}

JS：

function present(item_id){  
    var div = document.getElementById("div_num_"+item_id);

    if(div.style.visibility=="visible"){
        div.style.visibility = 'hidden';
        div.style.height= '0';
    } else {
        div.style.visibility = 'visible';
        div.style.height= "200px";      
    }
}

因为你可以看到所有信息加载页面但是不可见。 如果它不包括jquery，那么解决这个问题的其他好方法也会受到批评，因为我并不是真的很强大。

提前致谢。

Answer 1

首先，如果加载的信息不多，那么预加载数据可能更为明智。 用户需要一个响应式用户界面，即使这意味着他们永远看不到的数据的初始下载时间还有几毫秒。

但是，如果您坚持单独加载数据，则可以使用xmlhttprequest来加载数据的表示（例如在JSON中），并使用模板解决方案将结果输出到info div中。

可能生成数据的JSON表示的页面可能如下所示：

<?php
    $result = array();


    // ... Code that defines type ... //



    $int = 0;
    foreach($types as $data){

        $result[] = array(
            "int"       => $int,
            "number"    => $data["number"],
            "item_name" => $data["item_name"],
            "amount"    => $data["amount"]
        );

        $int++;
    }

    echo json_encode($result);
?>

因此，当用户单击链接时，上面的页面将加载到xmlhttprequest 。 然后，您可以使用JSON.parse(req.responseText)解析结果，并将HTML模板应用于结果（请查看上面的链接， 加上此链接，了解有关如何执行此操作的详细信息）。

再一次，您可能只需一次性加载所有数据。 额外的HTTP标头实际上使页面完全加载需要更长的时间。

Answer 2

你可以使用ajax调用：

用javascript

<script type="text/javascript">
function loadInfoRow()
{
var xmlhttp;
xmlhttp=new XMLHttpRequest();
xmlhttp.onreadystatechange=function()
{
   if (xmlhttp.readyState==4 && xmlhttp.status==200)
   {
     var responseText = xmlhttp.responseText;
     //Use the response text to add the extra row
   }
}
xmlhttp.open("GET","info.txt",true);
xmlhttp.send();
}
</script>

用jquery

$.ajax({
  url: "info.txt",
  context: document.body,
  success: function(text){
    //where text will be the text returned by the ajax call
    $(".result_table).append(text);
  }
});