嗨，我的网站上有树部分:第 1 部分是 d3.js 上的脚本，第 2 部分是 html 表单，第 3 部分是 anguir js 网格 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>
最佳答案
您可以使用 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>
关于javascript - 如何在发送表单上重新加载网站的一部分？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/42023616/