在jsf中使用json将数据从bean发送到javascript
send data from bean to javascript with json in jsf
我想把数组列表从managedBean发送到javascript代码,
my bean is here:
public void getDataAsJson(){
String [] dizi={"Tokyo","Jakarta","New York","Seoul",
"Manila","Mumbai","Sao Paulo","Mexico City",
"Dehli","Osaka","Cairo","Kolkata",
"Los Angeles","Shanghai","Moscow","Beijing",
"Buenos Aires","Guangzhou","Shenzhen","Istanbul"};
Random rnd =new Random();
JSONObject obj= new JSONObject();
for (int i = 0; i < dizi.length; i++)
obj.put(dizi[i], new Integer(rnd.nextInt(80)));
}
我的javascript代码在这里的XHTML页面:
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<script type="text/javascript">
<!--
$(function () {
var chart;
$(document).ready(function() {
chart = new Highcharts.Chart({
chart: {
renderTo: 'container',
zoomType: 'xy'
},
title: {
text: 'avarage'
},
subtitle: {
text: ''
},
xAxis: [{
gridLineWidth: 0.5,
categories: [// here is my city names which come from mybean]
}],
yAxis: [{ // Primary yAxis
labels: {
formatter: function() {
return this.value;
},
style: {
color: '#89A54E'
}
},
title: {
text: 'avarage',
style: {
color: '#89A54E'
}
}
}],
series: [{
name: 'avarage',
color: '#89A54E',
type: 'spline',
data: [// // here is my city's avarage which come from mybean],
labels: {
rotation: -90,
align: 'right',
style: {
fontSize: '13px',
fontFamily: 'Verdana, sans-serif'
}
}
}]
});
});
});
//-->
</script>
这是我的XHTML页面正文:
<body>
<script src="http://code.highcharts.com/highcharts.js"></script>
<div id="container" style="min-width: 400px; height: 400px; margin: 0 auto"></div>
</body>
您需要理解JSF在这个问题的上下文中仅仅是一个HTML/JS代码生成器。
您只需要让JSF 以这种方式打印所需的数据,使其最终成为语法有效的JS代码。
categories: #{bean.dataAsJson}
其中getDataAsJson()
返回表示所需JSON代码的String
。例如:基本上:
public String getDataAsJson() {
return "['foo', 'bar', 'baz']";
}
要验证结果,请在浏览器中右键单击页面并执行查看源。
categories: ['foo', 'bar', 'baz']
通过JSF Bean发送数据到javascript例程不是一个好主意,但我的解决方案是使用java web服务或JAX-RS。java web服务包含2个类,JaxRsActivator和资源类。下面是JaxRsActivator的源代码:
package service;
import javax.ws.rs.ApplicationPath;
import javax.ws.rs.core.Application;
@ApplicationPath("/rest")
public class JaxRsActivator extends Application {
}
资源类的源代码
package service;
import static javax.ws.rs.core.MediaType.TEXT_PLAIN;
import javax.ws.rs.GET;
import javax.ws.rs.Path;
import javax.ws.rs.Produces;
@Path("/resource")
@Produces(TEXT_PLAIN)
public class resource {
@GET
@Path("cities")
public String dizi() {
String s = "{'"Tokyo'",'"Jakarta'",'"New York'",'"Seoul'",'r'n" +
"'"Manila'",'"Mumbai'",'"Sao Paulo'",'"Mexico City'",'r'n" +
"'"Dehli'",'"Osaka'",'"Cairo'",'"Kolkata'",'r'n" +
"'"Los Angeles'",'"Shanghai'",'"Moscow'",'"Beijing'",'r'n" +
"'"Buenos Aires'",'"Guangzhou'",'"Shenzhen'",'"Istanbul'"};'r'n";
return s;
}
}
现在是JavaScript中的一个修改。将生成图表的匿名函数设置为命名函数,例如:generateChart(CityData),并将data:修改为data: CityData。你的JavaScript以:
开头$(function () {
var xhr = new XMLHttpRequest();
// replace the dots
var url = "http://localhost:8080/........../resource/cities";
xhr.onreadystatechange = function() {
// Check if fetch request is done
if (xhr.readyState == 4 && xhr.status == 200) {
console.log(xhr.responseText);
// Parse the JSON string
var jsonData = eval(xhr.responseText);
generateChart(jsonData);
}
};
// Do the HTTP call using the url variable we specified above
xhr.open("GET", url, true);
xhr.send();
function generateChart(CityData) {
// put your code for generating your chart
// modify line
data: CityData
}
//JavaScript结束
也把这个JavaScript放在JSF页面的末尾。页面加载完成后,开始JavaScript加载数据,数据加载完成后,开始生成图表。
成功。
相关文章:
- 我该如何从JSF Bean调用JavaScript函数
- 使用jstl c:forEach在迭代jsp bean上创建javascript json对象
- 从 javascript 调用 bean 方法
- 将bean变量传递给javascript
- 将托管 Bean 与 javascript 结合使用来创建元素
- 在 Javascript 中迭代 bean
- JavaScript var 未正确传递给支持 Bean
- 如何从托管 Bean 调用 JavaScript 函数
- 如何将 jstl 函数中的 javascript 变量传递给托管 Bean
- 如何使用 javascript 显示来自托管 Bean 的计时器
- 如何在 jsp scriplet 中获取 bean 值并存储在 javascript 变量中
- 将 bean 值作为字符串作为 JavaScript 使用
- javascript JSON object to JSF back bean
- java "bean:write " + javascript = "unterminat
- 使用 JavaScript 更改网页元素的支持 Bean 的值
- 从 jsf 中的托管 Bean 调用 javascript 的参数化函数
- 如何在 PrimeFaces 中的 JavaScript 中在托管 Bean 中设置参数
- 如何将映射从 Bean 传递到 JSP 并在 JavaScript 中使用
- 显示来自 javascript 的 bean 值
- 通过ajax重新加载JavaScript函数/重新读取jsf-bean值