对于这个方法,我们又使用二级联动这个案例来讲解吧。我们曾经使用过JavaScript来解析XML、JSON来实现二级联动。这次我使用Jquery+Struts2+JSON来实现二级联动。
$.ajax()这个方法接收的参数是一个JSON类型,JSON里面有几个参数:
这里遇到的问题:动态获取选择下拉框的值时候,调用的是val()而不是text()....
<%@ page contentType="text/html;charset=UTF-8" language="java" %> <html> <head> <title>省份-城市,基于jQuery的AJAX二级联动</title> <script type="text/javascript" src="js/jquery-1.8.2.js"></script> </head> <body> <%--############前台页面##############################--%> <select> <option>请选择省份</option> <option>广东</option> <option>北京</option> </select> <select> <option>请选择城市</微信可以买东西的软件_香港买马的最准网站option> </select> <%--############监听省份##############################--%> <script type="text/javascript"> $("#provinceId").change( function() { //每次调用的时候,把城市的值清空,除了第一项 $("#cityId option:gt(0)").remove(); //得到具体选择的值,讲道理这里应该是test的,可是test()没反应,要用val() var province = $("#provinceId option:selected").val(); //如果不是“请选择省份”,才触发事件 if ("请选择省份" != province) { //它接收的是一个JSON类型的数据 $.ajax( { type: "POST", url: "${pageContext.request.contextPath}/findCityByProvince?time=" + new Date().getTime(), data: {"province": province}, success: function (backData, aaa, ajax) { //看下服务器带过来的数据是什么样的,然后再对JSON进行解析 //alert(ajax.responseText); //得到服务器返回的数据,是一个JSON格式数据 var array = backData.city; for(var i=0;i<array.length;i++) { //动态创建option节点,添加到城市下拉框中 var $option = $("<option>" + array[i] + "</option>"); $("#cityId").append($option); } } } ); } }); </script>如果文章有错的地方欢迎指正,大家互相交流。习惯在微信看技术文章,想要获取皮卡堂3d怎么送礼_买卖二手房合同范本更多的Java资源的同学,可以关注微信公众号:Java3y
当前文章:
发布时间:2018-03-11 05:36:29
淘券啦 淘宝优惠券 宝宝街 美折淘 优惠券 天猫优惠券 淘宝优惠券 淘宝优惠券 优惠券 淘宝优惠券