我有一个关于将位置点数组从javascript传递到back bean的问题。我将使用这个点数组来创建一个多边形。为了这个目标,我应该从javascript到我的后端bean的数组,以将它们保存在数据库中。
这是我的xhtml代码段:
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no">
<meta charset="UTF-8">
<title>Drawing Tools</title>
<script type="text/javascript"
src="http://maps.google.com/maps/api/js?sensor=false"></script>
<style type="text/css">
#map, html, body {
padding: 0;
margin: 0;
height: 400px;
width: 400px;
}
#panel {
width: 200px;
font-family: Arial, sans-serif;
font-size: 13px;
float: right;
margin: 10px;
}
#color-palette {
clear: both;
}
.color-button {
width: 14px;
height: 14px;
font-size: 0;
margin: 2px;
float: left;
cursor: pointer;
}
#delete-button {
margin-top: 5px;
}
</style>
<script type="text/javascript">
var drawingManager;
var selectedShape;
var colors = ['#1E90FF', '#FF1493', '#32CD32', '#FF8C00', '#4B0082'];
var selectedColor;
var colorButtons = {};
var polyOptions;
function clearSelection() {
if (selectedShape) {
selectedShape.setEditable(false);
selectedShape = null;
}
}
function setSelection(shape) {
clearSelection();
selectedShape = shape;
shape.setEditable(true);
//selectColor(shape.get('fillColor') || shape.get('strokeColor'));
}
function deleteSelectedShape() {
if (selectedShape) {
selectedShape.setMap(null);
}
}
function initialize() {
var map = new google.maps.Map(document.getElementById('map'), {
zoom: 10,
center: new google.maps.LatLng(40.344, 39.048),
mapTypeId: google.maps.MapTypeId.ROADMAP,
disableDefaultUI: true,
zoomControl: true
});
polyOptions = new google.maps.Polygon({
strokeColor: '#ff0000',
strokeOpacity: 0.8,
strokeWeight: 0,
fillOpacity: 0.45,
fillColor: '#ff0000',
editable: false,
draggable: true
});
polyOptions.setMap(map);
google.maps.event.addListener(map, 'click', addPoint);
}
function addPoint(e) {
var vertices = polyOptions.getPath();
vertices.push(e.latLng);
document.getElementById('verticeForm:sth').value= vertices;
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>
</meta></meta>
</head>
<body>
<div id="map"></div>
<p:commandButton onclick="o.show();" value="Show">
<p:dialog widgetVar="o" >
<h:form id="verticeForm">
<h:outputLabel id="input">
<h:inputHidden id="sth" value="#{projectsController.list}" />
</h:outputLabel>
</h:form>
<h:outputText value="#{projectsController.asd}" />
</p:dialog>
</p:commandButton>
</body>
这是我的后豆片段:
private String sth;
public String getSth() {
return sth;
}
public void setSth(String sth) {
this.sth = sth;
}
private List<String> list = new ArrayList<String>();
public List<String> getList() {
return list;
}
public void setList(List<String> list) {
this.list = list;
}
private String asd;
public String getAsd() {
if(list.size()>0){
asd = list.get(0);
System.out.println(asd);
}
return asd;
}
public void setAsd(String asd) {
this.asd = asd;
}
}
基本上,如何在JSF中将顶点数组(在gmap上有点)发送到我的后端bean?
答案 0 :(得分:3)
添加该数组(JSON会更好)作为托管bean字段的值,然后将其设置为<h:inputHidden/>
,您可以执行并通过<f:ajax/>
呈现它以发送和接收数据:
<h:inputHidden id="verticesHiddenContainer" value="#{yourBean.vertices}" />
然后,你的bean应该有一个setter和一个getter。如果您选择将其作为JSON发送,我建议您使用Gson(因为您已经在谷歌的基础上)来解析它。
程序将是这样的:
首先,您生成vertices
JSON,其中包含您要发送到服务器的数据,然后将其设置为隐藏输入。我正在使用jQuery,但是如果你使用普通的javascript,你将不得不这样做,而是使用document#getElementById
代替:
var vertices = // You set your JSON here.
$("input[id='verticesHiddenContainer'").val(vertices);
然后,使用f:ajax
和commandLink
执行隐藏的组件,如下所示:
<h:commandLink value="Send data to server" action="#{yourBean.process}" >
<f:ajax execute="verticesHiddenContainer" />
</h:commandLink>
该链接现在将触发ajax请求,该请求使用输入的当前值更新bean中的字段。请记住,既然你传递了一个JSON,你就必须解析它。如果你正在使用Gson,那很简单:
public void setVertices(String verticesString) {
//Since I don't know what kind of structure you use, I suposse
//something like [[x,y]]. It can be more complex, but the
//idea would be the same. You parse the string here.
}
在SO中已经有很多关于JSON序列化和解析的答案。如果有疑问,我建议你看看他们: