从javascript传递数组到后端bean

我有一个关于从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>

这里是我的背豆片断：

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; 
    } 
}

基本上，我怎么能发送顶点数组（这对GMAP点）在JSF中我的背豆？

来源

2013-03-11 Ali Yucel Akgul

你能指出你想通过它的确切变量和在哪一点（行动）？ – partlov 2013-03-11 14:42:35

实际上我想在JS的addPoint函数中发送顶点值，以便在我的后端bean中列出对象。所以我可以将它存储起来以保存。 – 2013-03-11 14:45:12

您可以考虑使用Primefaces的p：remoteCommand：首先通过JavaScript更新隐藏输入，然后调用远程命令在服务器上将其作为字符串处理。 – skuntsel 2013-03-11 14:51:39

添加一个数组（JSON会更好）作为托管bean的字段的值，然后将其设置为<h:inputHidden/>可以执行，并通过<f:ajax/>渲染它来发送和接收数据：

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

然后，你的bean应该同时拥有一个setter和一个getter。如果你选择将它作为JSON发送，我建议你使用Gson（因为你已经在谷歌的理由）来解析它。

的程序是这样的：

首先，您生成vertices的JSON cointains要发送到服务器的数据，然后将它设置为隐藏的输入。我使用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. 
}

关于JSON序列化和解析已经有很好的答案了。我建议你看看他们，如果有疑问：

JSON to HashMap
String to JSON array（如果你的JSON结构不那么复杂）

来源

2013-03-11 14:46:22 Gamb

你能解释一下吗？ – 2013-03-11 14:57:59

从javascript传递数组到后端bean

回答

相关问题