Jquery就是这么简单(4)_H5之家 - 中国HTML5教程资源分享第一站

这里遇到的问题：动态获取主播送礼物给粉丝都送什么_给50多岁女领导送礼送什么意思选择下拉框的值时候，调用的是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>

Action

import com.opensymphony.xwork2.ActionSupport; import java.util.ArrayList; import java.util.List; /** * Created by ozc on 2017/5/18. */ public class ProvinceAction extends ActionSupport{ //自动封装数据 private String province; public String getProvince() { return province; } public void setProvince(String province) { this.province = province; } //封装城市的集合 private List<String> city = new ArrayList<>(); public List<String> getCity() { return city; } public String findCityByProvince() throws Exception { if ("广东".equals(province)) { city.add("广州"); city.add("珠海"); city.add("从化"); } else if ("北京".equals(province)) { city.add("一环"); city.add("二环"); city.add("三环"); city.add("四环"); } else { System.out.println("没有你选择的地区"); } return "ok"; } }

Struts.xml配置文件

<?xml version="1.0" encoding="UTF-8"?> <!DOCTYPE struts PUBLIC "-//Apache Software Foundation//DTD Struts Configuration 2.3//EN" "http://struts.apache.org/dtds/struts-2.3.dtd"> <struts> <package extends="json-default" namespace="http://3896ne7.vvaee.cn/"> <global-results> <result type="json"></result> </global-results> <action method="findCityByProvince"> </action> </package> </struts>

效果：

这里写图片描述

总结

如果文章有错的地方欢迎指正，大家互相交流。习惯在微信看技术文章，想要获取更多的Java资源的同学，可以关注微信公众号:Java3y