.第十章《DWR基础知识》.pptVIP

工作任务 外来务工人员基本信息登记表 相关实践17-1 准备工作。定义登记表页面HTML元素。 第一步，启动MyEclipse，新建Web工程“person”。 第二步，在webroot目录下新建“js”目录，将jQuery库文件“jquery-1.3.1.min.js”复制到该目录下。 第三步，在webroot目录下新建index.html页面，定义页面基本元素。 相关实践17-2 相关实践17-3 设计级联菜单 在填写人员信息时需要选择登记“现居地”，在选择“省份”后会在“市”组合框中动态填充市名，省与市的信息保存在服务器端，要做到无刷新的与服务器数据进行交互，显然需要AJAX技术，这里我们使用DWR框架实现。 相关实践17-4 第一步，我们要向当前工程导入并配置DWR框架. 第二步，在工程的“src”目录下新建Java类：com.handson.person.Province，这个类的对象包含省份及其包含的城市信息。 点击这里查看源文件 静态函数getAllProvince()用于返回获取数据源中所有省份的JSON格式字符串，例如： {[{province:北京},{province:天津},{province:澳门},{province:河北},{province:河南},{province:贵州}]} 静态函数getAllProvince(String provincename)根据省份获取所有城市信息，返回JSON格式字符串，例如，调用getAllProvince(“河北”)将返回： {[{city:石家庄},{city:承德},{city:保定}]} 相关实践17-5 打开webroot/web-inf目录下新建dwr.xml文件，在加入Province类的配置信息。DWR只对客户端暴露Province对象getAllProvince()与findCities()两个函数。 ?xml version=1.0 encoding=UTF-8? dwr allow create creator=new javascript=province param name=class value=com.handson.person.Province/ include method=getAllProvince/ include method=findCities/ /create /allow /dwr 配置好Province类后，部署应用并启动Tomcat，利用DWR测试页检查province的运行结果。 相关实践17-6 第四步，打开index.html页面 ，实现级联刷新功能 ，下段代码完成了两个操作： 调用DWR方法getAllProvince()方法查询省份数据并填充到组合框。 绑定省份组合框的change事件，当选择省份后调用findCities()查询并填充城市组合框。 相关实践17-7 $( function(){ //设置DWR方法为同步 dwr.engine.setAsync(false); //调用DWR方法getAllProvince(),获取所有省份填充到省份组合框 province.getAllProvince( function(ret){ var json = eval(ret); for(i = 0 ; i json.length ; i++){ $(#province)[0].options.add( new Option(json[i].province,json[i].province)); } } ); 相关实践17-8 //当选择省份时,调用DWR方法findCities()级联刷新城市 $(#province).bind(change, function(){ dwr.engine.setAsync(true); province.findCities($(#province).val() , function(ret){ $(#city)[0].options.length=0; var json = eval(ret); for(i = 0 ; i json.length ; i++){ $(#city)[0].options.add( new Option(json[i].city,json[i].city)); } } ); } ); } ) 相关实践17-9 开发联想提示 相关实践17