如何将参数从html传递到javascript函数
[英]How to pass arguments from html to javascript function
问题描述
html: 
HTML：
<html>
<head>
<script type="text/javascript" src="jquery-3.2.1.js"></script>
<script type="text/javascript" src="highcharts.js"></script>
<script type="text/javascript" src="myscripts.js"></script>
</head>
<body>
<h1>Sample Burndown Chart</h1>
<div id="container" style="min-width: 310px; height: 400px; margin: 0 auto"></div>
</body>
</html>
myscript.js: myscript.js：
$(function () {
$('#container').highcharts({
title: {
text: 'Burndown Chart',
x: -20 //center
},
xAxis: {
categories: ['Day 1', 'Day 2', 'Day 3', 'Day 4', 'Day 5', 'Day 6',
'Day 7', 'Day 8', 'Day 9', 'Day 10']
},
series: [{
name: 'Ideal Burn',
color: 'rgba(255,0,0,0.25)',
lineWidth: 2,
data: [100, 90, 80, 70, 60, 50, 40, 30, 20, 10]
}, {
name: 'Actual Burn',
color: 'rgba(0,120,200,0.75)',
marker: {
radius: 6
},
data: [100, 110, 85, 60, 60, 30, 32, 23, 9, 2]
}]
});
});
The code works, and I do see the pretty burndown chart. 该代码有效，我确实看到了漂亮的燃尽图。
However, can someone please show me the easiest/correct way to pass arguments to the javascript function inside myscript.js for the data . 但是，有人可以告诉我最简单/正确的方法将参数传递给data的 myscript.js内部的javascript函数。
In other words, instead of: 换句话说，代替：
Day 1, Day 2, Day 3... 第1天，第2天，第3天...
I would pass in actual dates. 我会通过实际日期。
Instead of 100, 110, 85... I would pass in the correct data values. 而不是100、110、85 ...我会传递正确的数据值。
Please advise. 请指教。
EDIT: 编辑：
A hashmap is passed from the server side to the front end. 哈希图从服务器端传递到前端。
return descriptor.getHtml("view", data);
the view is the html file. 该视图是html文件。
so I can access any value/object in the data , using $key_name 这样我就可以在数据访问任何值/对象，使用$ KEY_NAME
3 个解决方案
解决方案1
1 2017-11-20 22:28:49
Ideally I think you should get data from a server, if that's possible in your context, as @LMulvey suggested it depends on how you get the data from. 理想情况下，我认为您应该从服务器中获取数据，如果在您的上下文中是可行的，则@LMulvey建议，这取决于您如何获取数据。 Assuming you have and API to get values, you could use $.ajax() method from jQuery and the within the response fill the values of data and categories of your chart. 假设您有API来获取值，则可以使用jQuery中的$.ajax()方法，并且响应中的填充data值和图表categories 。 Hope that helps, cheers, sigfried. 希望能有所帮助，欢呼，草。
解决方案2
0 2017-11-20 23:11:32
In your case, simply write: 就您而言，只需编写：
<script>var myVar = 'myValue';</script>
to the page from your back-end logic. 从后端逻辑转到页面。 Your variable will now be available as a global variable. 您的变量现在将作为全局变量可用。 Be sure to include this script on the page before the script that tries to access it is loaded and executed. 在加载和执行尝试访问脚本的脚本之前，请确保在页面上包含此脚本。
解决方案3
0 2017-11-20 23:54:39
this seems to be working for me: 这似乎为我工作：
html: HTML：
<h1>Sample Burndown Chart</h1>
<div id="container" data-param1="heyaaa" style="min-width: 310px; height: 400px; margin: 0 auto"></div>
myscripts.js: myscripts.js：
$(function () {
var $cont = $("#container");
var val1 = $cont.data('param1');
alert(val1);
$('#container').highcharts({
title: {
text: val1,
x: -20 //center
},
The title of the chart was updated correctly. 图表标题已正确更新。
Is this the right way of doing things? 这是正确的做事方式吗？ or is there a cleaner way? 还是有更清洁的方法？ Ill probably have to add param2 and param3 as well. 可能还必须添加param2和param3。 (looks kind of ugly to my eyes) （在我看来有点难看）
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.