我在将位置点数组从 javascript 传递到后台 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>
这是我的 back-bean 片段:
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？
最佳答案
将该数组(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 序列化和解析的很好的答案。如果有疑问，我建议您看看它们:
- JSON to HashMap
- String to JSON array (如果你的 JSON 结构没那么复杂的话)
关于java - 将数组从 javascript 传递到 back bean，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/15341284/