将数组从javascript传递到后台bean

我有一个关于从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到HashMap
字符串到JSON数组(如果你的JSON结构不是那么复杂)

相关内容

最新更新

热门标签：