学习编程第11章jsp+js+ssm三级联动菜单

项目![

第一次打开django
要下载 需要等待一会

建立视图

jsp

<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>

<%@ taglib prefix=“fmt” uri=“http://java.sun.com/jsp/jstl/fmt” %>

请选择

                <select class="select" id="city_code" name="city_code" >
                    <option value="">请选择</option>
                </select>

                <select class="select" id="area_code" name="area_code">
                    <option value="">请选择</option>
                </select>

js

/加载省下拉选/
$(function () {
KaTeX parse error: Expected '}', got 'EOF' at end of input: … url: "{ctx}/shop/area/getProvince",
success: function (data) {
for (var i = 0; i < data.length; i++) {
$(’#province_code’).append("" + data[i].diqu + “”);
}
},
error: function () {
alert(“加载省失败”);
}
});
});
/加载市下拉选/
function getCity() {
var id = $("#province_code").val();
$("#city_code").empty();
$("#area_code").empty();
KaTeX parse error: Expected '}', got 'EOF' at end of input: … url: "{ctx}/shop/area/getCity",
data: {“id”: id},
success: function (data) {
$(’#city_code’).append("" + ‘请选择’ + “”);
$(’#area_code’).append("" + ‘请选择’ + “”);
for (var i = 0; i < data.length; i++) {
$(’#city_code’).append("" + data[i].diqu + “”);
}
},
error: function () {
alert(“加载市失败”);
}
});
}
;
/加载地区下拉选/
function getArea() {
var id = $("#city_code").val();
$("#area_code").empty();
KaTeX parse error: Expected '}', got 'EOF' at end of input: … url: "{ctx}/shop/area/getArea",
data: {“id”: id},
success: function (data) {
$(’#area_code’).append("" + ‘请选择’ + “”);
for (var i = 0; i < data.length; i++) {
$(’#area_code’).append("" + data[i].diqu + “”);
}
},
error: function () {
alert(“加载区失败”);
}
});
}

controller

@RequestMapping("/shop/area")

@Controller
public class AreaController {
@Autowired
private AreasService areasService;

@RequestMapping(value="getProvince" ,method  = RequestMethod.POST)
@ResponseBody
public List<Area> getProvince(){
    List<Area> areas=areasService.queryAreas(0);
    return areas;
}

@RequestMapping(value="getCity" ,method  = RequestMethod.POST)
@ResponseBody
public List<Area> getCity(Integer id){
    List<Area> areas=areasService.queryAreas(id);
    return areas;
}
@RequestMapping(value="getArea" ,method  = RequestMethod.POST)
@ResponseBody
public List<Area> getArea(Integer id){
    List<Area> areas=areasService.queryAreas(id);
    return areas;
}

}

seravc

@Service
@Transactional(readOnly = true)
public class AreasServiceimpl implements AreasService{

	@Resource
	private AreaDao areasDao;
 
	/**
	 * 通过pid查询Areas
	 */
 
	public List<Area> queryAreas(Integer pid) {
 
		return this.areasDao.queryAreas(pid);
	}
 
	public Area queryArea(Integer id){
		return this.areasDao.queryAreasInfo(id);
	}

}

po

public class Area {

private Integer id;
private String diqu;


public Integer getId() {
	return id;
}


public void setId(Integer id) {
	this.id = id;
}


public String getDiqu() {
	return diqu;
}

xmd

<select id="queryAreas" resultType="edu.sjzpc.core.po.Area" >
    SELECT * FROM area WHERE  id=#{id}
</select>

<select id="queryAreasInfo" resultType="edu.sjzpc.core.po.Area" >
    SELECT * FROM area WHERE  id=#{id}
</select>

</mapper

dao

public interface AreaDao {

List<Area> queryAreas(Integer id);

Area queryAreasInfo(Integer id);

public List<Area> queryCity(Integer id);

}