jquery的Ajax调用

<action name="findDcrsHotels"  class="...DcrsHotelAction">
   <result name="success">hotel_list.jsp</result>
</action>

findDcrsHotels 他什么都不做只返回一个页面hotel_list.jsp 此页面只有输入查询条件的INPUT框。

****************************************************************************

//hotel_list.jsp页面部分代码，上下部分省略

<form method="post" action="dcrsHotelList.action">
 城市：<ww:textfield value="南京" disabled="true"/>
 入住酒店：<ww:textfield name="name" id="name"/>
<input type="button" value="&nbsp;" onclick="getAllHotels();"/>
</form>
<div id="choose_hotel_list"></div>

****************************************************************************

这里有个<div id="choose_hotel_list"></div>这里显示查询的结果，这个查询结果我们将用jquery的Ajax调用dcrsHotelList.action来实现

配置如下

*****************************************************************************

 <action name="dcrsHotelList"  class="..action.DcrsHotelAction" method="findDcrsHotels">
            <result name="success">hotel_all.jsp</result>
            <result name="input">hotel_index.jsp</result>
        </action>

*****************************************************************************

dcrsHotelList 对应的DcrsHotelAction 的 findDcrsHotels方法返回一个List<Hotel> 内容显示由 hotel_all.jsp 来完成。

******************************************************************************

//hotel_all.jsp

<%@ page contentType="text/html;charset=utf-8" %>
<%@ taglib prefix="ww" uri="/webwork" %>

 <ww:iterator value="hotelBasicInfos">

//酒店内容的显示

</ww:iterator>

******************************************************************************

 下面是配置jquery的Ajax调用  xxx.js

******************************************************************************

$(document).ready(function() { // 文档加载完成运行这里的代码

getAllHotels();

}

function getAllHotels() {
    var url = 'dcrsHotelList.action';  //调用执行那个Action
     var name = $("#name").val(); //执行Action页面传入的参数即Action使用的参数
    var data = {'name':name};
    $.ajax({
        type: "POST",  
        url: url,
        data:data,
        dataType: "html",
        beforeSend: wait,   //在数据执行完成之前执行那个function
        success: function(data) {
            $("#choose_hotel_list").html(data);  //执行完成后把数据赋予对应的ID。
        }
    });
}

******************************************************************************

function wait() {
    $("#choose_hotel_list").html("<img src='../images/loading.gif'/> 酒店查询中，请等待......");
}