ajax - STRUTS2 和 AJAX - 选择国家/地区，填充各州

Question

我想在选择国家/地区后显示州/省。

JSP

       <s:select label="COUNTRY" name="summaryData.addressCountry" id="addForm_countryCode" 
                                      list="loyaltyCountryMap" tabindex="" headerKey="US" headerValue="United States"
                                      listKey="key" listValue="value.countryName" 
                                      onchange="getStateList('#addForm_countryCode')">

       </s:select> 

<s:select label="STATE" name="summaryData.addressCityCode" headerValue="-Select-" headerKey="-Select-" list="stateList" required="true" cssClass="storedPaymentInput_size1 required" id="stateList"/>

JavaScript:

  function getStateList() {
        var countryCode = $('#addForm_countryCode").val(); 
        $.ajax({
            url: 'ajaxStateList',
            dataType: 'html',
            data: { countryCode : countryCode},
            success: function(data) {
                $('#stateList').html( data );
            }
        });
    }

STRUTS.XML

     <action name="ajaxStateList" class="actions.AjaxStateList">
       <result name="success"/>
 </action>

Action 类

 private List<String> stateList;

    private String countryCode;

    public String getCountryCode() {
        return countryCode;
    }

    public void setCountryCode(String countryCode) {
        this.countryCode = countryCode;
    }

    public List<String> getStateList() {
        return stateList;
    }

    public void setStateList(List<String> stateList) {
        this.stateList = stateList;
    }

    public String execute() {

        LoyaltyStateProvinces.getInstance();

        stateList = StateProvinces.getAllStateProvinceByCountryCode(countryCode);

        for(StateProvince state: states){
            stateList.add(state.getStateProvinceCode());
        }


        return SUCCESS;
    }

如何使用 AJAX+Struts2 使其工作？

Answer 1

参见struts2-json-plugin 。让您的操作返回 json 结果类型(通过此插件)。您的操作类可以在很大程度上保持不变。

创建并测试您的操作返回 JSON 后(只需在浏览器中输入 URL)。然后你需要一些javaScript。我看到你正在使用 jQuerys $.ajax 方法...我更喜欢 $.getJSON它执行相同的操作，但假定数据采用 json 格式。

这是我自己的代码中的一些js:

            function punch(){
                $.getJSON("<s:url namespace="/timeclock/json" action="punch"/>",
                {
                    badge: $("#input_badge").val()
                },
                function(data) {
                    $("#input_badge").val("");
                    $("#emp_name").text(data.name);
                    $("#emp_time").text(data.punch);
                    $("#notification").fadeIn("slow", hide);
                });
                return false;
            }

您会注意到三个参数: Fist 是调用的 url，最好使用 Sturts2 url 标签构建。其次是发送到操作的参数，在本例中，“badge”被设置为 id 为“input_badge”的文本字段中的内容，然后发送到服务器。最后是回调成功时调用的函数，可以看到返回了“name”、“punch”等参数。