Question

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

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

Answer 1

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 2

您可以使用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 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;
}
 }

动作Bean

  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>

用于动态下拉列表的Stripes和Jquery以及Ajax

3 个答案: