Question

我是html和javascript的初学者，所以非常感谢您的帮助。

我正在创建一个页面，它接受表单中的值x和y并将其输入到图表中。

图表在同一网页上完美运行，但我希望在点击提交按钮后将图表放在完全不同的页面中。如何将这些变量转发到不同的页面并显示相同的图形？（我想完全避免使用JQuery，php等，因为这是针对学校项目的）

这是我的代码：

function someFunction(){

var xScore = parseFloat(x)
var yScore = parseFloat(y)

google.charts.load('current', {'packages':['corechart']});
  google.charts.setOnLoadCallback(drawChart);
  function drawChart() {
    var data = google.visualization.arrayToDataTable([
      ['x', 'y'],
      [ xScore ,      yScore],

    ]);

    var options = {
      title: 'Sample Graph',
      hAxis: {title: 'x value', minValue: 1, maxValue: 9},
      vAxis: {title: 'y value', minValue: 1, maxValue: 9},
      legend: 'none'
    };

    var chart = new google.visualization.ScatterChart(document.getElementById('chart_div'));

    chart.draw(data, options);
}

当我在身体中放置div后，会加载此图表。

<div id="chart_div" style="width: 900px; height: 900px;">

我想将此div放在另一个html页面的主体中，但是希望继续在此网页上生成的x和y值（它们是在提交表单时生成的）。

Answer 1

使用window.localStorage

将以下文字对象放在您将从当前页面和下一页面引用的某个js文件中（或者只是在必要时粘贴该对象）。

var xyStore =
    {
        GetX: function () {
            return JSON.parse(localStorage.getItem("x"));                
        },
        GetY: function () {
            return JSON.parse(localStorage.getItem("y"));                
        },
        SetX: function (x) {
            localStorage.setItem("x", JSON.stringify(x));
        },
        SetY: function (y) {
            localStorage.setItem("y", JSON.stringify(y));
        },
   };

在当前页面中使用：

xyStore.SetX(12);

在下一页中使用：

alert(xyStore.GetX()); // alerts: 12

修改

关注@ RokoC.Buljan评论，此功能可以扩展如下：

Get: function (name) { return JSON.parse(localStorage.getItem(name)); }, Set: function (name, val) { localStorage.setItem(name, JSON.stringify(val)); }

Answer 2

在使用method="GET"和action="/page2.html"配置的第一页上使用简单表单。表单中的输入字段也应填充name属性，例如<input name="x">。然后，当您按表单中的提交按钮时，它会将字段名称和值作为查询字符串传递到第二页。例如/graph.html?x=123&y=456。

在第二页上，您想要读取这些值，因此您需要解析位于window.location.search中的查询字符串。有多种方法可以执行此操作，但没有内置功能（它始终是一个字符串，例如x=123&y=456，您需要解析）。当你提到它是一个学校项目时，我将保持开放，最后一点将成为下一个挑战;）

（@ localStorage如@remdevtec所述，当然也是一种选择。）

javascript传递变量到下一页（没有php）

2 个答案: