如何在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="选定&gt;&gt;" onclick="add2Select()"/><input type="button" value="&lt;&lt;移除" 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>

使

转载于:https://www.cnblogs.com/javaxiaok/articles/3052542.html

如何在SpringMVC中结合Ajax进行异步通讯相关推荐

SpringMVC中使用ajax
在SpringMVC处理JSON数据中介绍了SpringMVC如何返回一个json对应的对象或者数组.这篇将介绍一下,SpringMVC在使用ajax时的几种情况. 测试一:发送get请求,不带参数 ...
如何在js中使用ajax请求数据,在 JS 中怎么使用 Ajax 来进行请求
在 JS 中怎么使用 Ajax 来进行请求发布时间:2021-07-22 09:48:43 来源:亿速云阅读:78 作者:chen 本篇内容介绍了"在 JS 中怎么使用 Ajax 来进行 ...
如何在js中使用ajax请求数据,在 JS 中如何使用 Ajax 来进行请求
做者:Danny Markov 译者:前端小智来源:tutorialzine 点赞再看,微信搜索 [大迁世界]关注这个没有大厂背景,但有着一股向上积极心态人.本文 GitHub https://gi ...
django html直接调用的方法,如何在Django中使用AJAX从html正确调用函数/url？
我试图在一个框的顶部显示一个用户名,在这个框中,用户可以在表单中输入他们的员工,而不必刷新页面.在例如,他们输入他们的#,然后在他们点击/tab到下一个字段后,它会在顶部显示他们的名字,这个名字来自 ...
mvc ajax返回整个页面跳转,在springmvc中的ajax发布调用之后，有什么方法可以将我的页面（jsp）重定向到另一个页面（jsp）...
基本上,我的情况是我尝试通过使用ajax post将3个对象的列表作为字符串发送到我的控制器,如下所示. AJAX调用的JavaScript函数: $.ajax({ type: 'POST', dat ...
ajax请求时设置cookie,如何在JavaScript中使用AJAX请求设置Cookie值？
我们需要使用AJAX请求或以任何AJAX请求将这些cookie发送到服务器的方式来设置cookie. 这里要注意的一件事是,对任何远程服务器的每个AJAX请求都会自动将所有cookie发送到该服务器, ...
如何在java中实现跨线程的通讯
一般而言,如果没有干预的话,线程在启动之后会一直运行到结束,但有时候我们又需要很多线程来共同完成一个任务,这就牵扯到线程间的通讯. 如何让两个线程先后执行?Thread.join方法 private ...
springmvc中ajax,springmvc中ajax处理
1.使用HttpServletResponse处理--不需要配置解析器 @Controller public class AjaxController { @RequestMapping(" ...
python异步加载图片_如何在PyQt5中正确异步加载图像？
我在尝试如何在pyqtqlistview中正确地完成异步映像加载.在我的主小部件由一个Qlistview和一个QLineEdit文本框组成. 我有一个参与者数据库,我使用QAbstractListM ...

如何在SpringMVC中结合Ajax进行异步通讯

如何在SpringMVC中结合Ajax进行异步通讯相关推荐

最新文章

热门文章