Question

我有一个关于将位置点数组从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？

Answer 1

添加该数组（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结构不那么复杂）

将数组从javascript传递回back bean

1 个答案: