只有當包含他的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);
  }
});