Stripes 和 Jquery 和 Ajax 用于动态下拉菜单

Question

我在 Web 层使用 Stripes。我想包含两个下拉列表，其中第二个下拉列表中的项目列表取决于第一个下拉列表中选择的值。

你说的非常简单的 Ajax。我找不到这样做的一个例子。 Stripes 网站上的示例都很简单，比如更新标签。我读到，Stripes 返回的 JSON 很时髦，而且 jQuery 处理起来并不简单。我怎样才能做到这一点？一个例子将不胜感激！

Answer 1

您可以使用 Google 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 参数 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");
}

    }

Stripes/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>