Question

您好我的网站上有树部件：第1部分是d3.js上的脚本，第2部分是html表单，第3部分是anguir js Grid UI。我希望当我点击提交表单时重新启动第1部分，我该怎么办？任何想法？

<html>
<head></head>
<body></body>

<script> Part I </script>
<form> Part II </form>
<script> Part III </script>

</html>

第一部分：

<script>
    var margin = {top: 20, right: 200, bottom: 100, left: 50},
        margin2 = { top: 430, right: 10, bottom: 20, left: 40 },
        width = 960 - margin.left - margin.right,
        height = 500 - margin.top - margin.bottom,
        height2 = 500 - margin2.top - margin2.bottom;

    var parseDate = d3.time.format("%Y%m%d").parse;
    var bisectDate = d3.bisector(function(d) { return d.date; }).left;

    var xScale = d3.time.scale()
        .range([0, width]),

        xScale2 = d3.time.scale()
        .range([0, width]); // Duplicate xScale for brushing ref later

    var yScale = d3.scale.linear()
        .range([height, 0]);

    // 40 Custom DDV colors 

        var color = d3.scale.ordinal().range(["#FAAC58", "#3ADF00", "#9A2EFE", "#58ACFA", "#848484", "#FE2E2E"]);  


    var xAxis = d3.svg.axis()
        .scale(xScale)
        .orient("bottom"),

        xAxis2 = d3.svg.axis() // xAxis for brush slider
        .scale(xScale2)
        .orient("bottom");    

    var yAxis = d3.svg.axis()
        .scale(yScale)
        .orient("left");  
</script>

第二部分：

<form action = "http://localhost:5000/result" method = "POST">
      <p>Part: <span ng-bind="entityRowPart"></span></p>
      <p>Loc: <span ng-bind="entityRowLoc"></span></label></p>
      <p>Avg: <input type = "text" name = "Avg" ng-model="entityRowMean"/></p>
      <p>Std: <input type = "text" name = "Std" ng-model="entityRowStd"/></p>
      <p>Lead Time: <input type = "text" name = "leadTime" value="5"/></p>
      <p>Service Level: <input type ="text" name = "serviceLevel" value="95"/></p>
      <p>Simulation num days: <input type ="text" name = "numdays" value="10"/></p>
      <p><input type = "submit" value = "Submit"/></p>
    </form>

第三部分

<div ui-grid="gridOptions" ui-grid-selection ui-grid-pagination class="grid"></div>

Answer 1

您可以使用AJAX更改网站的某些部分。 Here您可以找到更多信息和here您可以查看演示。

编辑：添加了有关此代码的示例。

function loadDoc() {
  var xhttp = new XMLHttpRequest();
  xhttp.onreadystatechange = function() {
    if (this.readyState == 4 && this.status == 200) {
      document.getElementById("part1").innerHTML =
      this.responseText;
    }
  };
  xhttp.open("GET", "THECODEOFYOURPART1", true);
  xhttp.send();
}

单击表单上的提交应该触发loadDoc()，第一部分应该在html标记中声明一个ID，如下所示：

<script id="part1"></script>

如何在发送表格上重新加载部分网站？

1 个答案: