如何動態渲染一個<div>單擊一個按鈕后的內容而不重新加載整個內容？

Question

細節：

 <div class="row-fluid"> <div ng-app="sampleAngular"> <div id="panel-1" ng-controller="Controller1"> <!-- some html code here that displays a table of information--> </div> <p><button type="button" onclick="onSubmit();" name="subscribe">Subscribe to Panel-2 Info</button> </p> <div id="panel-2" ng-controller="Controller2"> <!-- some html code here that displays another table of information--> </div> </div> </div>

問題：只有當用戶單擊“訂閱 Panel-2 信息”按鈕時，才會顯示 div id“panel-2”中的內容。 該按鈕應更新 DB 中的記錄，然后在不刷新整個頁面的情況下呈現 div id "panel-2" 中的內容。 如何實現此要求 - onSubmit() 函數中的任何 ajax 邏輯？

注意：我不應該渲染整個頁面，然后在“panel-2”周圍設置可見性：false ，因為在用戶訂閱（單擊按鈕）之前我不應該調用控制器“ ng-controller="Controller2 ”。

Answer 1

在您的onSubmit()函數中，進行 Ajax 調用，該調用應該以 HTML 格式返回您想要的結果，或者作為數據返回，然后您將其在 JavaScript 中進行 HTML 格式設置並使用innerHTML屬性顯示它。 這是一個示例（單擊按鈕查看其工作原理）：

 function onSubmit() { //make your Ajax call here //if the Ajax was successful, display the result document.getElementById("panel-2").innerHTML = "some html code here that displays another table of information (this is the result of the Ajax call)"; //if the Ajax resulted in error, display an error message //document.getElementById("panel-2").innerHTML = "an error occurred"; }

 <div class="row-fluid"> <div ng-app="sampleAngular"> <div id="panel-1" ng-controller="Controller1"> some html code here that displays a table of information </div> <p><button type="button" onclick="onSubmit();" name="subscribe">Subscribe to Panel-2 Info</button> </p> <div id="panel-2" ng-controller="Controller2"></div> </div> </div>