Javascript 如何通过点击按钮将id（变量）从一个html页面传递到另一个页面？_Javascript_Jquery_Html

Javascript 如何通过点击按钮将id（变量）从一个html页面传递到另一个页面？

javascript jquery html

Javascript 如何通过点击按钮将id（变量）从一个html页面传递到另一个页面？,javascript,jquery,html,Javascript,Jquery,Html,我正在使用html上的highcharts绘制图表，它也有一个按钮，单击按钮，它应该能够将variablecur_id+1传递到其他页面，以便它可以根据传递的变量读取json文件 sample1.html 如何实现这一点？您可以使用cookie实现这一点。由于您已经在使用jQuery，所以可以使用jQuery cookie插件并在cookie中设置您的id。在下一页你可以取回它设置 $.cookie("curr_id", value); 得到 var id= $.cookie("curr_i

我正在使用html上的highcharts绘制图表，它也有一个按钮，单击按钮，它应该能够将variablecur_id+1传递到其他页面，以便它可以根据传递的变量读取json文件

sample1.html

如何实现这一点？

您可以使用cookie实现这一点。由于您已经在使用jQuery，所以可以使用jQuery cookie插件并在cookie中设置您的id。在下一页你可以取回它

设置

$.cookie("curr_id", value);

得到

var id= $.cookie("curr_id");

在其他页面$_get['id']中对get使用查询字符串

cur_id=id;
    var filename="sample"+cur_id+"html?id="+cur_id;
    load(filename);

您可以通过查询字符串传递该值，并在第二页中读回该值

function click(id) 
{
    cur_id=id;
    var filename="sample.html?id=".cur_id;
    load(filename);
}

使用以下代码读取查询字符串值

function getQueryStringParameterByName(name) {
name = name.replace(/[\[]/, "\\[").replace(/[\]]/, "\\]");
var regex = new RegExp("[\\?&]" + name + "=([^&#]*)"),
    results = regex.exec(location.search);
return results === null ? null : decodeURIComponent(results[1].replace(/\+/g, " "));}

您的url:example.com/some_data

你可以用

window.location.hash.substr1//输出：某些数据不能使用。对于javascript中的concat字符串，我还修改了代码，使其更简单

<script src="http://code.highcharts.com/highcharts.js"></script>
<script src="http://code.highcharts.com/highcharts-more.js"></script>
<script src="http://code.highcharts.com/modules/exporting.js">

<script type='text/javascript'>

$(function () {

 var options = {
        chart :{
                  type: 'polygon',
                  renderTo: 'chart',                                   
        },
        title: {},
        yAxis: {},
        xAxis: {},
        series: []
    };

    $.getJSON('sample1.json', function(data) {
        options.series=data;
        var chart = new Highcharts.Chart(options);
    })
  });
  </script>
  </head>
  <body>

  <div id="container" style="min-width: 310px; height: 400px; max-width: 600px; margin: 0 auto"></div>
<br>

 <img name="jsbutton" src="zoom-out.svg"  onclick="load('sample'+cur_id+'html');">

</div>
</body>

您有两个选择：-

1：或者你可以像queryString一样在url中传递它。您还可以对其进行加密，以便不需要的用户看不到您的id参数

2:或者您可以将其存储在localStorage.setItem'id'，yourVariable；并检索localStorage.getItem'id'；非常容易地使用HTML5本地存储

这两个选项都将完成您的请求。问题是，当有人从浏览器中删除cookie/历史记录时，第二个选项将不起作用。所以如果你能选第一个更好

例如：-

第一个-

假设您的url是abc.com。单击按钮，获取id并执行window.location.href=xyz.com？+id。然后在下一个页面，即xyz.com上，像这样从url获取此id

document.URL.split('?')[1] //you will get your id here .

使用localStorage对象是一个简单的解决方案，可以同时使用Javascript/jQuery

<script>
// Check browser support

   if (typeof(Storage) !== "undefined") {
        // Store
        localStorage.setItem("lastname", "Smith");
        // Retrieve
        document.getElementById("result").innerHTML = localStorage.getItem("lastname");
    } else {
        document.getElementById("result").innerHTML = "Sorry, your browser does not support Web Storage...";
    }
    </script>

与高位图表无关。这个id是否来自highchart的任何系列点？我如何获得页面的当前id以便可以传递到下一页。有没有实现相同功能的示例？

<script>
// Check browser support

   if (typeof(Storage) !== "undefined") {
        // Store
        localStorage.setItem("lastname", "Smith");
        // Retrieve
        document.getElementById("result").innerHTML = localStorage.getItem("lastname");
    } else {
        document.getElementById("result").innerHTML = "Sorry, your browser does not support Web Storage...";
    }
    </script>