我遇到一个需求,可能大伙也遇见过这样的需求,那就是在页面上提供省和市的列表供用户选择输入,当选择某个省时,市的列表立即改变成这个省里的城市,很简单吧,刚开始时想调用list的onChange方法直接到后面取数据,然后刷新整个页面,改变城市列表的内容,考虑到网络后台处理时要执行很多无关的逻辑处理,所以想到只刷新城市列表那一个控件,那就请出名躁一时的ajax吧!
实现这个功能并不复杂,结合struts一会工夫就搞定了:下面是我的做法
首先描述一下AJAX在Struts框架中的位置和作用:
STRUTS框架实现了MVC模式,大家都知道这个模式,也知道STRUTS数据流的过程,简单讲,VIEW.jsp发送请求到CONTROL :action.do,action.do来选择业务处理模块,在业务处理模块中更新MODEL:model.java ,并请求action.do选择VIEW.jsp,发送回客户VIEW,而AJAX在VIEW端发送xmlhttprequest给action.do,然后像普通处理一样更新MODEL,不同的是,要由MODEL来生成带有返回数据的XML给客户端VIEW,可以看到,这个过程省略了选择VIEW.jsp的过程,所以,客户端没有刷新页面,但数据已经传到VIEW了。
我的应用中稍微改变了一下做法,处理完请求后,再交给ACTION来选择VIEW.jsp,不过这个jsp文件和页面的相同,这样在客户端就收到一个和现有页面只有一小部分不同的HTML代码,那部分不同的代码就是要在页面上更新的数据,只要在得到数据后将那部分数据分离出来显示在页面上,就可以实现无刷新页面的更新效果了。。。
jsp代码:
- <script type="text/javascript">
- function getCity()
{
//alert("begin1");
retrieveURL('/xxxx/netinfo.do?method=getCity','NetinfoForm');//document.forms[0].submit();
}
- </script>
- <script type="text/javascript" src="/xxxx/scripts/Ajax.js"></script>
- <tr bgcolor="#F7FDFD">
- <td class="right">省份: td>
- <td>
- <html:select property="province" size="1" onchange="javascript:getCity();" >
- <logic:iterate id="prov" name="NetinfoForm" property="province_list">
- <%String nid= ((Province)prov).getId().toString();%>
- <html:option value="<!---->"><bean:write name="prov" property="name"/>html:option>
- logic:iterate>
- html:select>
- td>
- <td class="right">城市: td>
- <td>
- <span name="change" id="change">
- <html:select property="city" size="1" >
- <logic:iterate id="cit" name="NetinfoForm" property="city_list">
- <%String nid= ((City)cit).getId().toString();%>
- <html:option value="<!---->"><bean:write name="cit" property="name"/>html:option>
- logic:iterate>
- html:select>
- td>
- tr>
action.do代码
- public ActionForward getCity(ActionMapping mapping, ActionForm form, HttpServletRequest request, HttpServletResponse response) {
- int provinceId=Integer.parseInt(request.getParameter("province"));
- ArrayList<city></city> city_list=(ArrayList<city></city>)cityManager.getCityByProvince(provinceId);
- object.setCity_list(city_list);
- initForm(form, request, object);
- mapping.findForward(SUCCESS);
-
关键部分:ajax.js代码:
js 代码
分享到:
- 2007-08-15 15:12
- 浏览 4280
- 评论(3)
- 论坛回复 / 浏览 (3 / 8041)
- 查看更多
相关推荐
关于struts2里用javascript刷新window.showModalDialog的父页面
jquery+struts2实现异步刷新,是个不错的实例,可以结合到项目中使用,简单易懂。
用Struts2+mysql实现的简单信息录入,分页查询
实现简单登录,无刷新获取后台数据,删除数据,修改并更新数据
struts2:我想用struts标签来统计购物车的总价
详细介绍了java web开发的model2模式即mvc模式的理论,以及mvc框架struts框架的理解
struts标签实现数据的查询修改
struts2无刷新上传,你只需将项目加到tomcat后,直接访问即可。项目里面有相应的操作说明,源码里面也有注释。 1、修改了图片的读取方式,这次读取会更快(以前的方式使用io流读取文件,然后再写到文件里面,现在是...
struts2.0实现的数据分页实现及实现分页步骤,
jsp项目开发实录 jsp项目开发实录 Struts 实现 程序完整 Struts 实现 程序完整 Struts 实现 程序完整 Struts 实现 程序完整Struts 实现 程序完整Struts 实现 程序完整Struts 实现 程序完整Struts 实现 程序完整...
ajax和struts结合实现无刷新验证用户名是否存在 ajax和struts结合实现无刷新验证用户名是否存在
使用Maven搭建S2SH工程详解一:使用Maven创建struts2工程
该项目是struts2无刷新实现登陆,退出操作,运用的框架为Struts2,运用的jar包为2.1.6版本,tomcat为6.0.20。运用的技术为ongl,以及Ajax。
NULL 博文链接:https://left-jessica.iteye.com/blog/739878
关于jsp验证码页面。通过ajax来实现验证码的局部刷新和验证
struts2简单登录页面struts2简单登录页面struts2简单登录页面struts2简单登录页面struts2简单登录页面struts2简单登录页面struts2简单登录页面struts2简单登录页面
struts2 <s:if>标签使用struts2 <s:if>标签使用struts2 <s:if>标签使用struts2 <s:if>标签使用struts2 <s:if>标签使用struts2 <s:if>标签使用
该资源使用struts实现分页功能,是通过Action实现中枢的作用
ajax struts 无刷新访问后台返回json数据,返回list、map,java类对象等json数据,前台js解析json数据,内有jar包,代码类。是一个完整的项目实例。
前两天做了一个后台程序,要求是无刷新上传头像,现在项目做完了。把项目中遇到知识点梳理一下,希望能帮到你。