條紋和jQuery和Ajax動態下拉

Question

我正在使用條紋爲web層。我想包含兩個下拉列表，其中第二個下拉列表中的項目列表取決於第一個下拉列表中選擇的值。

你說的很直截了當的Ajax。我找不到一個這樣做的例子。 Stripes站點上的示例都很簡單，就像更新標籤一樣。我讀過，由Stripes返回的JSON很不簡單，因爲jQuery無法處理這個簡單的&。我怎樣才能做到這一點？一個例子，將不勝感激！

Answer 1

你可以使用谷歌GSON（https://code.google.com/p/google-gson/） 例如：

import com.google.gson.Gson; 

public Resolution autocomplete() { 

    List<String> opts = new ArrayList<String>(); 

    ... 

    String json = new Gson().toJson(opts); 
    return new StreamingResolution("application/json",json); 
} 

Answer 2

javascript部分（使用jQuery）非常簡單。您將更改處理程序附加到第一個<select>，並且每次更改都會向服務器請求特定於新值的數據。

響應可能是JSON或html。下面假設服務器將返回HTML：

$('#select_1').change(function(){ 
    var data={ select_1_val : $(this).val() }; 
    /* make ajax request and load result into select_2*/ 
    $('#select_2').load('/path/to/server', data);  
}); 

在你的服務器控制器，你將處理一個GET請求並提取GET PARAM select_1_val的價值，做任何後端魔法需要回到不僅僅是一套<option>標籤

Answer 3

package com.rajamma.dealmeister.domain; 

public class Item 
{ 

int value; 
String label; 

public int getValue() 
{ 
    return value; 
} 

public void setValue(int value) 
{ 
    this.value = value; 
} 

public String getLabel() 
{ 
    return label; 
} 

public void setLabel(String label) 
{ 
    this.label = label; 
} 

public Item(int key, String name) 
{ 
    value = key; 
    label = name; 
} 
} 

行動豆

package com.rajamma.dealmeister.web.actions; 

import java.util.ArrayList; 
import java.util.List; 

import net.sourceforge.stripes.action.DefaultHandler; 
import net.sourceforge.stripes.action.ForwardResolution; 
import net.sourceforge.stripes.action.Resolution; 
import net.sourceforge.stripes.action.SessionScope; 
import net.sourceforge.stripes.action.StreamingResolution; 

import com.google.gson.Gson; 
import com.rajamma.dealmeister.domain.Item; 

    @SessionScope 
    public class DropDownActionBean extends AbstractActionBean 
    { 

     List<Item> habitatList = new ArrayList<Item>(); 
     List<Item> animalList = new ArrayList<Item>(); 

     private String selectHabitat = "1"; 
     private String selectAnimal; 

     public DropDownActionBean() 
     { 

      habitatList.add(new Item(1, "Land")); 
      habitatList.add(new Item(2, "Sea")); 
      habitatList.add(new Item(3, "Air")); 

      animalList.add(new Item(1, "please choose Habitat")); 

     } 

     public List<Item> getHabitatList() 
     { 
     return habitatList; 
     } 

      public void setHabitatList(List<Item> habitatList) 
     { 
      this.habitatList = habitatList; 
     } 

     public List<Item> getAnimalList() 
     { 
      return animalList; 
     } 

     public void setAnimalList(List<Item> animalList) 
     { 
      this.animalList = animalList; 
     } 

    public String getSelectHabitat() 
    { 
     return selectHabitat; 
    } 

    public void setSelectHabitat(String selectHabitat) 
    { 
     this.selectHabitat = selectHabitat; 
    } 

    public String getSelectAnimal() 
{ 
    return selectAnimal; 
} 

public void setSelectAnimal(String selectAnimal) 
{ 
    this.selectAnimal = selectAnimal; 
} 

@DefaultHandler 
public Resolution test() 
{ 
    return new ForwardResolution("/WEB-INF/jsp/deal/DropDownTest.jsp"); 
} 

public Resolution populateDropDownList() 
{ 
    if (selectHabitat.equals("1")) // Land 
    { 
     animalList = new ArrayList<Item>(); 
     animalList.add(new Item(1, "Lion")); 
     animalList.add(new Item(2, "Tiger")); 
     animalList.add(new Item(3, "Horse")); 
     animalList.add(new Item(4, "Elephant")); 
    } 
    if (selectHabitat.equals("1")) // Land 
    { 
     animalList = new ArrayList<Item>(); 
     animalList.add(new Item(1, "Lion")); 
     animalList.add(new Item(2, "Tiger")); 
     animalList.add(new Item(3, "Horse")); 
     animalList.add(new Item(4, "Elephant")); 
    } 
    if (selectHabitat.equals("2")) // Sea 
    { 
     animalList = new ArrayList<Item>(); 
     animalList.add(new Item(1, "Whale")); 
     animalList.add(new Item(2, "Shark")); 
     animalList.add(new Item(3, "Dolphin")); 
     animalList.add(new Item(4, "Octopus")); 
    } 
    if (selectHabitat.equals("3")) // Sea 
    { 
     animalList = new ArrayList<Item>(); 
     animalList.add(new Item(1, "Eagle")); 
     animalList.add(new Item(2, "Vulture")); 
     animalList.add(new Item(3, "Swift")); 
     animalList.add(new Item(4, "Crow")); 
    } 
    String json = new Gson().toJson(animalList); 
    return new StreamingResolution("application/json", json); 
} 

    public Resolution submit() 
{ 
    return new ForwardResolution("/WEB-INF/jsp/deal/DropDownTest.jsp"); 
} 

    } 

條紋/ JSP頁面

<%@ page contentType="text/html;charset=UTF-8" language="java" %> 
<%@ taglib prefix="stripes" uri="http://stripes.sourceforge.net/stripes.tld" %> 
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%> 
<%@ taglib uri="http://java.sun.com/jsp/jstl/fmt" prefix="fmt"%> 

<html> 
<head><title>Simple jsp page</title> 
    <script type="text/javascript" src="../js/jquery-latest.js"></script>  
     <script type="text/javascript"> 

      function invokeForJson(form, event, container) { 

        params = {}; 
        if (event != null) params = event + '&' + $(form).serialize();    
       $.post(form.action, 
        params, 
         function (data) { 
         var listItems = ""; 

         if (data) { 
          for(var i = 0; i < data.length;i++) 
          { 
           listItems+="<option value='" + data[i].value + "'>" + data[i].label + "</option>"; 
         } 
         $(container).html(listItems); 
         } 
        }); 
    } 


     $(function() { 
       $('#dropdown1').change(function() { 
        var selectedValue = $(this).val(); 
       invokeForJson($('form')[0], 'populateDropDownList', '#dropdown2'); 
       });   
     }); 

    </script> 
</head> 
<body> 

<stripes:form beanclass="com.rajamma.dealmeister.web.actions.DropDownActionBean"> 
    <stripes:select id="dropdown1" name="selectHabitat"> 
      <c:forEach var="item" items="${actionBean.habitatList}"> 
       <option value="${item.value}">${item.label}</option> 
     </c:forEach> 
    </stripes:select> 

    <stripes:select name="selectAnimal" id="dropdown2"> 
       <c:forEach var="item" items="${actionBean.animalList}"> 
       <option value="${item.value}">${item.label}</option> 
     </c:forEach> 
    </stripes:select> 

    <stripes:submit name="submit"/> 


</stripes:form> 

</body> 
</html>