從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

回答

相關問題