如何在单击按钮时动态呈现 <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”周围设置 visibility: 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>