1

我有一个关于将位置点数组从 javascript 传递到 back bean 的问题。我将使用这个点数组来创建一个多边形。为此，我应该将数组从 javascript 获取到我的 back 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？

4

1 回答 1

3

将该数组（最好是 JSON）添加为托管 bean 的字段值，然后将其设置为<h:inputHidden/>您可以执行并渲染它<f:ajax/>以发送和接收数据：

<h:inputHidden id="verticesHiddenContainer" value="#{yourBean.vertices}" />

然后，你的 bean 应该有一个 setter 和一个 getter。如果您选择将其作为 JSON 发送，我建议您使用Gson（因为您已经在 Google 上）来解析它。

该过程将是这样的：

首先，您生成包含vertices要发送到服务器的数据的 JSON，然后将其设置为隐藏输入。我正在使用 jQuery，但如果你使用纯 javascript，你将不得不做同样的事情，但使用document#getElementById：

var vertices = // You set your JSON here.
$("input[id='verticesHiddenContainer'").val(vertices);

f:ajax然后，使用和 a执行隐藏组件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 序列化和解析的很好的答案。如果有疑问，我建议你看看它们：

于 2013-03-11T14:46:22.150 回答