SpringMVC中应用Ajax异步通讯
SpringMVC学习相关的给出这几个链接
http://www.cnblogs.com/dennisit/archive/2013/04/10/3012972.html
http://www.cnblogs.com/dennisit/archive/2013/04/10/3012993.html
http://www.cnblogs.com/dennisit/archive/2013/04/13/3017910.html
http://www.cnblogs.com/dennisit/archive/2013/04/13/3019391.html
直奔主题,说如何在SpringMVC中结合Ajax进行异步通讯.相关说明见代码注释.
<!DOCTYPE HTML>
<html>
<head>
<meta charset="GBK"/>
<title>Title</title>
<script type="text/javascript" src="jquery1.4.2.js"></script>
<script>
$(function(){
//绑定省份标签,请求时间为select选项改变,发送请求
$("#province").change(function(){
$.ajax({
type: "get", //请求方式get
url: "areashipping.do?method=getCityData", //请求处理执行方法,这里采用相对路径
data: "province=" + $(this).val(), //请求携带的参数值
success: function(result) {//json格式：[{"id":10076,"title":"","sort":0,"firstletter":"","areaname":"兰州市","items":[],"parentid":10009,"sortvalue":0}]
$("#city").empty(); //清空id值为city的select标签中的内容
result = eval(result); //转化为数组
for (var i = 0; i < result.length; i++) {
//向city标签中添加option节点,value值为tb_area区域表中的记录id,现实给用户的是区域名称
$("#city").append("<option value='" + result[i].id+ "'>" + result[i].areaname+ "</option");
}
}
});
});
});
</script>
</head>
<body>
<div style="padding-left: 50px;">
<!--异步请求绑定时间,省份表中的选定项改变后将服务器发送请求-->
省
<select multiple="multiple" style="width: 100px;height:130px;" id="province">
<!--provinces是从上一个请求页面携带过来的数据-->
<c:forEach items="${provinces}" var="province">
<!--默认选中数据库中tb_area区域表中id为10010的省份-->
<option value="${province.id }" <c:out value="${province.id==10010?'selected':'' }"/> > ${province.areaname } </option>
</c:forEach>
</select>
市
<select multiple="multiple" style="width: 100px;height:130px;" id="city">
<!--为了达到初始化的效果,所以默认展示tb_area区域表中id为10090的市,该记录的parentId值为10010,很好理解,
默认某个省的某个市被选中,处理方式有些笨,希望哪位大侠有好的建议科普一下,因为第一次展示出来肯定要有
默认数据且也是从数据库中读取出来的,想不到别的好办法就这样做了。
-->
<c:forEach items="${gdcities}" var="city">
<option value="${city.id }" <c:out value="${city.id==10090?'selected':'' }"/> > ${city.areaname } </option>
</c:forEach>
</select>
</div>
</body>
</html>
Springmvc的控制器配置文件需要先在web.xml文件中声明,关于Springmvc相关的参照:http://www.cnblogs.com/dennisit/archive/2013/04/10/3012993.html
<!--配置Sring MVC的核心控制器DispatcherServlet Spring view分发器-->
<servlet>
<servlet-name>dispatcherServlet</servlet-name>
<servlet-class>org.springframework.web.servlet.DispatcherServlet</servlet-class>
<init-param>
<param-name>contextConfigLocation</param-name>
<!-- 如果放在/WEB-INF/目录下则值应该为:/WEB-INF/dispatcher-servlet.xml -->
<param-value>classpath:dispatcher-servlet.xml</param-value>
</init-param>
<load-on-startup>1</load-on-startup>
</servlet>
<!--为DispatcherServlet建立映射 -->
<servlet-mapping>
<servlet-name>dispatcherServlet</servlet-name>
<url-pattern>*.do</url-pattern>
</servlet-mapping>
在dispatcher-servlet.xml中我们创建相应的请求方式映射
<bean id="controlHandlerMapping" class="org.springframework.web.servlet.handler.SimpleUrlHandlerMapping">
<property name="mappings">
<props>
<!--控制器映射方式-->
<prop key="jmp/areashipping.do">shippingRegionController</prop>
</props>
</property>
</bean>
<!--控制转发配置文件中创建控制器Bean-->
<bean name="shippingRegionController" class="net.gbicc.commons.control.ShippingRegionConfigController" autowire="byName" />
当我们的省区域改变后方服务器发送异步请求areashipping.do?method=getCityData,该请求通过在控制器的配置文件中查找映射,找到相应的控制器操作类,method指定处理异步请求的方法名为getCityData.我们在getCityData中进行业务交互.ajax请求过程中【data: "province=" + $(this).val(),】携带了表示对应省记录的id,根据该id查找其对应的市,所以我们在请求处理方法中获取该值然后进行查找,SpringMVC为设计很好,我么可以像servlet中处理请求的方式一样,进行处理异步请求.
//获取市级数据 用于Jquery异步获取
public ModelAndView getCityData(HttpServletRequest request,HttpServletResponse response){
String province = request.getParameter("province");
response.setContentType("text/Xml;charset=UTF-8");
try {
//根据异步请求获取对应的市信息
List<Area> area = this.areaService.findAreaListByParentId(province);
//将查询出来的对象集合转换为json格式
JSONArray array = JSONArray.fromArray(area.toArray());
//给请求作出响应
response.getWriter().write(array.toString());
} catch (Exception e) {
e.printStackTrace();
}
return null;
}
如果一些处理正常,程序会接着执行到ajax请求的success标签部分
success: function(result) {//json格式：[{"id":10076,"title":"","sort":0,"firstletter":"","areaname":"兰州市","items":[],"parentid":10009,"sortvalue":0}]
$("#city").empty(); //清空id值为city的select标签中的内容
result = eval(result); //转化为数组
for (var i = 0; i < result.length; i++) {
//向city标签中添加option节点,value值为tb_area区域表中的记录id,现实给用户的是区域名称
$("#city").append("<option value='" + result[i].id+ "'>" + result[i].areaname+ "</option");
}
}
我们可以在此处使用弹窗方式接货result数据,然后查看该json数据
success: function(result) {//json格式：[{"id":10076,"title":"","sort":0,"firstletter":"","areaname":"兰州市","items":[],"parentid":10009,"sortvalue":0}]
alert(result);
$("#city").empty(); //清空id值为city的select标签中的内容
result = eval(result); //转化为数组
for (var i = 0; i < result.length; i++) {
//向city标签中添加option节点,value值为tb_area区域表中的记录id,现实给用户的是区域名称
$("#city").append("<option value='" + result[i].id+ "'>" + result[i].areaname+ "</option");
}
}
比如我们查看台湾省相应的数据如下,对应的标签中的值如下
附录:使用Javascript操作dom节点,实现省市移动选择效果.效果图如下:
相关代码:
<!DOCTYPE HTML>
<html>
<head>
<meta charset="GBK"/>
<title>Title</title>
<script type="text/javascript" src="jquery1.4.2.js"></script>
<style>
body{
font-size:12px;
}
input[type=button]{
color:gray;
border:1px solid #0099aa;
margin-top:10px;
}
select{
color:red;
border:1px solid #0099aa;
}
</style>
<script>
//点击城市列表,添加到已经选择列表框
function add2Select(){
//遍历城市列表框,如果属性值为选定状态的,则将对象添加到右侧
var cityArr = document.getElementById("city").options;
var cityset = document.getElementById("selectedArea").options;
for(var i=0; i<cityArr.length; i++){
if(cityArr[i].selected == true){
//遍历已经选择的列表框,如果在选项存在于列表框中则不再添加
var flag = true;
tag = false; //只要有一次匹配说明,用户进行了选择触发
for(var j=0;j<cityset.length; j++){
if(cityset[j].value==cityArr[i].value){
flag = false; //将标签状态改为不许要添加
break;
}
}
if(flag){
var opt = new Option(cityArr[i].text,cityArr[i].value );
opt.selected = true;
cityset.add(opt);
}else{
alert("您已经选择过该区域了!");
}
}
}
}
//从已经选择列表中移除对象,遍历已经选择列表,如果列表中的有状态为选择了的将其移除
function removeSelect(){
var cityset = document.getElementById("selectedArea").options;
if(cityset.length==0){
alert("无选定数据");
return;
}
for(var i=0; i<cityset.length; i++){
if(cityset[i].selected == true){
cityset.remove(cityset[i]);
i--; //注意,该句很重要,因为上面已经执行了移除,为了保证循环能执行下去,i要减去1,
//否则我们看到的效果是点击移除按钮,只移除了一个已选定状态的,然后就结束了
}
}
}
</script>
</head>
<body>
<div style="padding-left: 50px; margin-top:80px;">
<div id="selePC" style="float:left;">
<!--异步请求绑定时间,省份表中的选定项改变后将服务器发送请求-->
省
<select multiple="multiple" style="width: 100px;height:130px;" id="province">
<option selected>台湾省</option>
<option>天津市</option>
<option>新疆省</option>
<option>西藏</option>
<option>云南省</option>
</select>
市
<select multiple="multiple" style="width: 100px;height:130px;" id="city">
<option>台北市</option>
<option>基隆市</option>
<option>台南市</option>
<option>台中市</option>
</select>
</div>
<div style="float:left; width:50px; padding:30px;" id="selectBT">
<input type="button" value="选定>>" onclick="add2Select()"/>
<input type="button" value="<<移除" onclick="removeSelect()""/>
</div>
<div id="selectED" style="float:left;">
<select multiple="multiple" style="width: 110px;height:130px;" id="selectedArea" name="stedarea">
</select>
已选定
</div>
</div>
</body>
</html>
修正错误:从已经选择列表中移除的写法
//遍历已经选择列表,如果列表中的有状态为选择了的将其移除 function removeSelect(){ var cityset = document.getElementById("selectedArea").options; if(cityset.length==0){ alert("无选定数据"); return; } var newcityset=new Array(); for(var i=0; i<cityset.length; i++){ if(cityset[i].selected == false){ newcityset.push(cityset[i]); } } document.getElementById("selectedArea").options.length=0; for(var i=0; i<newcityset.length; i++){ cityset.add(newcityset[i]); } }
转载请注明出处:[http://www.cnblogs.com/dennisit/archive/2013/04/25/3043171.html]
热爱生活,热爱Coding,敢于挑战,用于探索 ...
