<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<base href="<%=basePath%>">
<title>My JSP ‘index.jsp‘ starting page</title>
<meta http-equiv="pragma" content="no-cache">
<meta http-equiv="cache-control" content="no-cache">
<meta http-equiv="expires" content="0">
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="This is my page">
<!--
<link rel="stylesheet" type="text/css" href="styles.css">
-->
<script type="text/javascript" src="jquery-1.7.2.js"></script>
<script type="text/javascript">
$(
function (){
//alert("asdf");
$.ajax({
url:"proviceServlet",
type:"get",
data:{"type":"provice"},
success:function (msg){
for(var i=0;i<msg.length;i++){
$("#provice").append("<option value="+msg[i].proviceID+">"+msg[i].proviceName+"</option>");
}
}
} );
$("#provice").change(
function (){
//alert("进入城市");
$("#city option:gt(0)").remove();
$.ajax({
url:"cityServlet",
type:"get",
data:{"type":"provice","proviceID":$("#provice").attr("value")},
dataType: "json",
success:function (msg){
for(var i=0;i<msg.length;i++){
$("#city").append("<option value="+msg[i].cityID+">"+msg[i].cityName+"</option>");
}
}
});
}
);
$("#city").change(
function (){
// alert("进入区域");
$("#area option:gt(0)").remove();
// alert($("#city").attr("value"));
$.ajax({
url:"areaServlet",
type:"get",
data:{"type":"area","cityID":$(‘#city‘).attr("value")},
success:function (msg){
for(var i=0;i<msg.length;i++){
$("#area").append("<option value="+msg[i].areaID+">"+msg[i].areaName+"</option>");
}
}
});
//alert($("#city").attr("value"));
}
);
//<--隐藏span-->
$("span").hide();
//<-- 提交表单-->
$("#create").click(
function (){
alert("提交表单");
//alert($("#form_1").serialize());成功，可行的方法之一，将此写入97行data中,
$.ajax({
url:"finalServlet",
type:"post",
data:{"proviceID":$("#provice").attr("value"),"cityID":$(‘#city‘).attr("value"),"areaID":$("#area").val()},
success:function (){
$(".success").show();
}
});
return false;
}
);
}
);
</script>
</head>
<body>
<form id="form_1">
<table align="center">
<tr>
<td>
<select id="provice" name="proviceID">
<option >--请选择省区--</option>
</select>
</td>
</tr>
<tr>
<td>
<select id="city" name="cityID">
<option >--请选择市区--</option>
</select>
</td>
</tr>
<tr>
<td>
<select id="area" name="areaID">
<option >--请选择县区--</option>
</select>
</td>
</tr>
<tr>
<td>
<input id="create" type="button" value="提交"/>
</td>
</tr>
<tr>
<td>
<span class="success" > 提交成功</span>
<span class="fail"> 提交失败</span>
</td>
</tr>
</table>
</form>
</body>
</html>