个人中心
gpt4 book ai didi

javascript - 如何在发送表单上重新加载网站的一部分？

转载 作者：行者123 更新时间：2023-12-01 04:03:15 24 4
gpt4 key购买 nike

嗨，我的网站上有树部分:第 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/

24 4 0
文章推荐： couchdb 用复杂的键减少
文章推荐： jquery - Struts2 Jquery 多选值
文章推荐： javascript - 如何在javascript中获取数组对象内的对象？
文章推荐： javascript - 判断文件是否存在或者是否为0字节
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com